Flexbox · Bootstrap em Português
Ative o comportamento flexbox
Conteúdo justificado
Grow e shrink
Com align-items
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.
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.
Eu sou um flex container!
<div class="d-flex p-2 bd-highlight">Eu sou um flex container!</div>
Eu sou um flex container inline!
<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.
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.
Use flex-column para definir uma direção vertical ou flex-column-reverse para iniciar a direção vertical no lado oposto.
Variações responsivas também existem para flex-direction.
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.
Variações responsivas também estão presentes na classe justify-content.
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).
Variações responsivas também estão presentes para align-items.
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).
Flex item alinhado
<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.
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.
Variações responsivas também existem para flex-fill.
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.
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.
Variações responsivas também existem para flex-grow e flex-shrink.
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.
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.
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.
Variações responsivas também existem para flex-wrap.
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.
Primeiro flex item
Segundo flex item
Terceiro flex item
<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>
Variações responsivas também existem para order.
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.