Source

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!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Eu sou um contêiner flexbox inline!
<div class="d-inline-flex p-2 bd-highlight">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

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
<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">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
<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">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

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, betweenou around.

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>

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-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around

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

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

Encher

Use a .flex-fillclasse em uma série de elementos irmãos para forçá-los em larguras iguais enquanto ocupa todo o espaço horizontal disponível. Especialmente útil para navegação de largura igual ou justificada.

Item flexível
Item flexível
Item flexível
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">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

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
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">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
<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">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

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 ( .mr-auto) e empurrando dois itens para a esquerda ( .ml-auto).

Infelizmente, o IE10 e o IE11 não suportam corretamente as margens automáticas em itens flexíveis cujo pai tem um justify-contentvalor não padrão. Veja esta resposta do StackOverflow para mais detalhes.

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 bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

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

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">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: column, e margin-top: autoou margin-bottom: auto.

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 flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

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

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 orderaceita qualquer valor inteiro (por exemplo, 5), adicione CSS personalizado para quaisquer valores adicionais necessários.

Primeiro item flexível
Segundo item flexível
Terceiro item flexível
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">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-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

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-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch