Ir para o conteúdo principal Pular para a navegação de documentos
Check
in English

Flexão

Gerencie rapidamente o layout, alinhamento e dimensionamento de colunas de grade, navegação, componentes e muito mais com um conjunto completo de utilitários flexbox responsivos. Para implementações mais complexas, CSS personalizado pode ser necessário.

Ativar comportamentos flexíveis

Aplique displayutilitários para criar um contêiner flexbox e transformar elementos filhos diretos em itens flexíveis. Os contêineres e itens flexíveis podem ser modificados ainda mais com propriedades flexíveis adicionais.

Eu sou um contêiner flexbox!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Eu sou um contêiner flexbox inline!
html
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Também existem variações responsivas para .d-flexe .d-inline-flex.

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex
  • .d-xxl-flex
  • .d-xxl-inline-flex

Direção

Defina a direção dos itens flexíveis em um contêiner flexível com utilitários de direção. Na maioria dos casos, você pode omitir a classe horizontal aqui, pois o padrão do navegador é row. No entanto, você pode encontrar situações em que precisa definir explicitamente esse valor (como layouts responsivos).

Use .flex-rowpara definir uma direção horizontal (o padrão do navegador) ou .flex-row-reversepara iniciar a direção horizontal do lado oposto.

Flexibilidade do item 1
Flexibilidade do item 2
Flexibilidade do item 3
Flexibilidade do item 1
Flexibilidade do item 2
Flexibilidade do item 3
html
<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Use .flex-columnpara definir uma direção vertical ou .flex-column-reversepara iniciar a direção vertical do lado oposto.

Flexibilidade do item 1
Flexibilidade do item 2
Flexibilidade do item 3
Flexibilidade do item 1
Flexibilidade do item 2
Flexibilidade do item 3
html
<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Variações responsivas também existem para flex-direction.

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-column-reverse

Justifique o conteúdo

Use justify-contentutilitários em contêineres flexbox para alterar o alinhamento de itens flexíveis no eixo principal (o eixo x para iniciar, eixo y se flex-direction: column). Escolha entre start(padrão do navegador), end, center, between, aroundou evenly.

Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

Variações responsivas também existem para justify-content.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-evenly
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-sm-evenly
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-md-evenly
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-lg-evenly
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around
  • .justify-content-xl-evenly
  • .justify-content-xxl-start
  • .justify-content-xxl-end
  • .justify-content-xxl-center
  • .justify-content-xxl-between
  • .justify-content-xxl-around
  • .justify-content-xxl-evenly

Alinhar itens

Use align-itemsutilitários em contêineres flexbox para alterar o alinhamento de itens flexíveis no eixo cruzado (o eixo y para iniciar, o eixo x se flex-direction: column). Escolha entre start, end, center, baselineou stretch(padrão do navegador).

Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Variações responsivas também existem para align-items.

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-stretch

Alinhar-se

Use align-selfutilitários em itens do flexbox para alterar individualmente seu alinhamento no eixo cruzado (o eixo y para iniciar, o eixo x se flex-direction: column). Escolha entre as mesmas opções que align-items: start, end, center, baseline, ou stretch(padrão do navegador).

Item flexível
Item flexível alinhado
Item flexível
Item flexível
Item flexível alinhado
Item flexível
Item flexível
Item flexível alinhado
Item flexível
Item flexível
Item flexível alinhado
Item flexível
Item flexível
Item flexível alinhado
Item flexível
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Variações responsivas também existem para align-self.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-stretch

Encher

Use a .flex-fillclasse em uma série de elementos irmãos para forçá-los em larguras iguais ao seu conteúdo (ou larguras iguais se seu conteúdo não ultrapassar suas caixas de borda) enquanto ocupa todo o espaço horizontal disponível.

Item flexível com muito conteúdo
Item flexível
Item flexível
html
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

Variações responsivas também existem para flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

Crescer e encolher

Use .flex-grow-*utilitários para alternar a capacidade de um item flexível de crescer para preencher o espaço disponível. No exemplo abaixo, os .flex-grow-1elementos usam todo o espaço disponível possível, enquanto permitem que os dois itens flexíveis restantes tenham o espaço necessário.

Item flexível
Item flexível
Terceiro item flexível
html
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

Use .flex-shrink-*utilitários para alternar a capacidade de redução de um item flexível, se necessário. No exemplo abaixo, o segundo item flexível com .flex-shrink-1é forçado a envolver seu conteúdo em uma nova linha, “encolhendo” para permitir mais espaço para o item flexível anterior com .w-100.

Item flexível
Item flexível
html
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

Também existem variações responsivas para flex-growe flex-shrink.

  • .flex-{grow|shrink}-0
  • .flex-{grow|shrink}-1
  • .flex-sm-{grow|shrink}-0
  • .flex-sm-{grow|shrink}-1
  • .flex-md-{grow|shrink}-0
  • .flex-md-{grow|shrink}-1
  • .flex-lg-{grow|shrink}-0
  • .flex-lg-{grow|shrink}-1
  • .flex-xl-{grow|shrink}-0
  • .flex-xl-{grow|shrink}-1
  • .flex-xxl-{grow|shrink}-0
  • .flex-xxl-{grow|shrink}-1

Margens automáticas

O Flexbox pode fazer coisas incríveis quando você mistura alinhamentos flexíveis com margens automáticas. Abaixo estão três exemplos de controle de itens flexíveis por meio de margens automáticas: padrão (sem margem automática), empurrando dois itens para a direita ( .me-auto) e empurrando dois itens para a esquerda ( .ms-auto).

Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
html
<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

Com itens de alinhamento

Mova verticalmente um item flexível para a parte superior ou inferior de um contêiner misturando align-items, flex-direction: columne margin-top: autoou margin-bottom: auto.

Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
html
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

Enrolar

Altere como os itens flexíveis são agrupados em um contêiner flexível. Escolha entre nenhum encapsulamento (o padrão do navegador) com .flex-nowrap, encapsulamento com .flex-wrapou encapsulamento reverso com .flex-wrap-reverse.

Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
<div class="d-flex flex-nowrap">
  ...
</div>
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
<div class="d-flex flex-wrap">
  ...
</div>
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Variações responsivas também existem para flex-wrap.

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-wrap-reverse

Ordem

Altere a ordem visual de itens flexíveis específicos com um punhado de orderutilitários. Nós fornecemos apenas opções para fazer um item primeiro ou último, bem como uma redefinição para usar o pedido DOM. Como orderleva qualquer valor inteiro de 0 a 5, adicione CSS personalizado para quaisquer valores adicionais necessários.

Primeiro item flexível
Segundo item flexível
Terceiro item flexível
html
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

Variações responsivas também existem para order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xxl-0
  • .order-xxl-1
  • .order-xxl-2
  • .order-xxl-3
  • .order-xxl-4
  • .order-xxl-5

Além disso, também existem classes responsivas .order-firste que alteram o de um elemento aplicando e , respectivamente..order-lastorderorder: -1order: 6

  • .order-first
  • .order-last
  • .order-sm-first
  • .order-sm-last
  • .order-md-first
  • .order-md-last
  • .order-lg-first
  • .order-lg-last
  • .order-xl-first
  • .order-xl-last
  • .order-xxl-first
  • .order-xxl-last

Alinhar conteúdo

Use align-contentutilitários em contêineres flexbox para alinhar itens flexíveis no eixo cruzado. Escolha entre start(padrão do navegador), end, center, between, aroundou stretch. Para demonstrar esses utilitários, reforçamos flex-wrap: wrape aumentamos o número de itens flexíveis.

Atenção! Esta propriedade não tem efeito em linhas únicas de itens flexíveis.

Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
<div class="d-flex align-content-end flex-wrap">...</div>
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
<div class="d-flex align-content-center flex-wrap">...</div>
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
<div class="d-flex align-content-between flex-wrap">...</div>
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
<div class="d-flex align-content-around flex-wrap">...</div>
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
Item flexível
<div class="d-flex align-content-stretch flex-wrap">...</div>

Variações responsivas também existem para align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-between
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-between
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-between
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-between
  • .align-content-xl-around
  • .align-content-xl-stretch
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Objeto de mídia

Procurando replicar o componente de objeto de mídia do Bootstrap 4? Recrie-o rapidamente com alguns utilitários flexíveis que permitem ainda mais flexibilidade e personalização do que antes.

Placeholder Image
Este é algum conteúdo de um componente de mídia. Você pode substituir isso por qualquer conteúdo e ajustá-lo conforme necessário.
html
<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

E digamos que você queira centralizar verticalmente o conteúdo ao lado da imagem:

Placeholder Image
Este é algum conteúdo de um componente de mídia. Você pode substituir isso por qualquer conteúdo e ajustá-lo conforme necessário.
html
<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Sass

API de utilitários

Os utilitários Flexbox são declarados em nossa API de utilitários em scss/_utilities.scss. Saiba como usar a API de utilitários.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),