Flexbox
Rapidamente, gerencie o layout, alinhamento, dimensão da grade de colunas, navegação, componentes e muito mais, utilizando todo um conjunto de utilitários flexbox. No entanto, para implementações mais complexas, CSS customizado pode ser necessário.
Ative o comportamento flexbox
Use utilitários display para criar um container flexbox e transformar elementos filhos diretos em flex items. Depois, flex containers e items são capazes de serem modificados com propriedades flex adicionais.
<div class="d-flex p-2 bd-highlight">Eu sou um flex container!</div><div class="d-inline-flex p-2 bd-highlight">Eu sou um flex container inline!</div>Variações responsivas também existem para .d-flex e .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 flex items, em um flex container, com os utilitários de direção. Na maioria dos casos, você poderá omitir a classe horizontal, já que o padrão dos browsers é row. Contudo, poderás encontrar situações onde precisará, explicitamente, definir este valor (como nos layouts responsivos).
Use .flex-row para definir uma direção horizontal (o padrão do browser) ou .flex-row-reverse para iniciar a direção horizontal, só que começando do lado oposto.
<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-column para definir uma direção vertical ou flex-column-reverse para iniciar a direção vertical no lado oposto.
<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
Conteúdo justificado
Use utilitários justify-content nos flex containers para alterar o alinhamento dos flex items, no eixo principal (eixo x quando usando a classe start ou eixo y quando usando a classe end). Escolha entre start (padrão do browser), end, center, between ou around.
<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 estão presentes na classe 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
Align items
Use utilitários align-items em flex containers para mudar o alinhamento dos flex items, no eixo transversal (eixo y quando usando a classe start ou eixo x quando utilizar flex-direction: column). Você pode escolher entre start, end, center, baseline ou stretch (padrão de browsers).
<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 estão presentes 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 self
Use utilitários align-self em flex items para, individualmente, alterar seus alinhamentos no eixo transversal (eixo y quando usando a classe start ou eixo x quando utilizar flex-direction: column). Poderás escolher das mesmas opções que o align-item: start, end, center, baseline ou stretch (padrão de browsers).
<div class="align-self-start">Flex item alinhado</div>
<div class="align-self-end">Flex item alinhado</div>
<div class="align-self-center">Flex item alinhado</div>
<div class="align-self-baseline">Flex item alinhado</div>
<div class="align-self-stretch">Flex item alinhado</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
Preenchimento
Utilize a classe .flex-fill em uma série de elementos irmãos, para forçá-los a terem larguras idênticas, de modo que usem todo o espaço horizontal disponível. Muito útil para navegação com largura igual ou justificada.
<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
Grow e shrink
Use utilitários flex-grow para alternar a habilidade de um flex item de extender-se para ocupar todo o espaço disponível. No exemplo abaixo, os elementos flex-grow-1 usam todo o espaço disponível que podem, enquanto os restantes flex items usam só o necessário.
<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>Utilize utilitários .flex-shrink-* para alternar a habilidade de um flex item de se encolher, quando necessário. No exemplo abaixo, o segundo flex item com .flex-shrink-1 é forçado a quebrar sua linha, para dar mais espaço ao elemento anterior que possui w-100.
<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>Variações responsivas também existem para flex-grow e 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
Flexbox pode fazer algumas coisas muito legais, quando misturamos alinhamentos flex e margens automáticas. Abaixo, é exibido três exemplos de como controlar flex items usando margens automáticas: default (sem margens automáticas), empurrando dois items à direita (.mr-auto) e empurrando dois items a esquerda (.ml-auto).
Infelizmente, IE10 e IE11 não suportam margens automáticas, adequadamente, em flex items que o pai possui um valor justify-content não padrão. Veja este tópico, no StackOverflow, para mais detalhes.
<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 align-items
Verticalmente, mova um flex item para a parte superior ou inferior de um container, combinando align-items, flex-direction: column e margin-top: auto ou margin-bottom: auto.
<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>Quebra
Altere como os flex items quebrarão, em um flex container. Escolha entre nunca quebrar (padrão do browser), quebrar e quebra reversa. Isso tudo usando .flex-nowrap, .flex-wrap ou flex-wrap-reverse, respectivamente.
<div class="d-flex flex-nowrap">
...
</div><div class="d-flex flex-wrap">
...
</div><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
Mude a ordem visual de flex items específicos, com um punhado de utilitários order. Nós, apenas, provemos opções para fazer um item ser o primeiro ou último, assim como um reset para usar a ordem do DOM. Como os utilitários order usam um número inteiro (5, por exemplo), use um CSS personalizado para criar valores adicionais, se necessário.
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">Primeiro flex item</div>
<div class="order-2 p-2 bd-highlight">Segundo flex item</div>
<div class="order-1 p-2 bd-highlight">Terceiro 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
Align content
Use utilitários align-content em flex containers para alinhar todos os flex items ao mesmo tempo, no eixo transversal. Você pode escolher entre start (padrão dos browsers), end, center, between, around ou stretch. Para demonstrar estes utilitários, nós utilizamos flex-wrap: wrap e aumentamos a quantidade de flex items.
Atenção! Esta propriedade não faz efeito em linhas únicas de flex items.
<div class="d-flex align-content-start flex-wrap">
...
</div><div class="d-flex align-content-end flex-wrap">...</div><div class="d-flex align-content-center flex-wrap">...</div><div class="d-flex align-content-between flex-wrap">...</div><div class="d-flex align-content-around flex-wrap">...</div><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