Flex Bootstrap 5

Caixa flexível

A maior diferença entre o Bootstrap 3 e o Bootstrap 4 & 5 é que o Bootstrap 5 agora usa flexbox em vez de flutuantes para lidar com o layout.

Módulo de layout de caixas flexíveis, que permite projetar estruturas de layout responsivo flexível mais facilmente, sem a necessidade de usar flutuantes ou alinhamento.

Se você não está familiarizado com flex, você pode aprender em nosso Tutorial de Flexbox CSS aprenda.

Notas:Versões do IE9 e anteriores não suportam Flexbox.

Notas:Se você precisar de suporte para IE8-9, use o Bootstrap 3. É a versão mais estável do Bootstrap, e a equipe ainda o suporta para correções de erros críticos e alterações de documentação. Mas não serão adicionadas novas funcionalidades.

Exemplo

Para criar um contêiner flexbox e transformar diretamente os itens filhos em itens flexíveis, use d-flex Classe:

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Item flexível 1</div>
  <div class="p-2 bg-warning">Item flexível 2</div>
  <div class="p-2 bg-primary">Item flexível 3</div>
</div>

Experimente você mesmo

Exemplo

Para criar um contêiner flexbox em linha, use d-inline-flex Classe:

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Item flexível 1</div>
  <div class="p-2 bg-warning">Item flexível 2</div>
  <div class="p-2 bg-primary">Item flexível 3</div>
</div>

Experimente você mesmo

Direção horizontal

use .flex-row Exibir os itens flexíveis horizontalmente (ao lado), que é a configuração padrão.

Dica:usar .flex-row-reverse Alinhamento à direita na direção horizontal:

Exemplo

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Item flexível 1</div>
  <div class="p-2 bg-warning">Item flexível 2</div>
  <div class="p-2 bg-primary">Item flexível 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Item flexível 1</div>
  <div class="p-2 bg-warning">Item flexível 2</div>
  <div class="p-2 bg-primary">Item flexível 3</div>
</div>

Experimente você mesmo

Direção vertical

use .flex-column Exibir os itens flexíveis verticalmente (empilhados um sobre o outro), ou usar .flex-column-reverse Inverter a direção vertical:

Exemplo

<div class="d-flex flex-column">
  <div class="p-2 bg-info">Item flexível 1</div>
  <div class="p-2 bg-warning">Item flexível 2</div>
  <div class="p-2 bg-primary">Item flexível 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">Item flexível 1</div>
  <div class="p-2 bg-warning">Item flexível 2</div>
  <div class="p-2 bg-primary">Item flexível 3</div>
</div>

Experimente você mesmo

Alinhar conteúdo

usar .justify-content-* A classe pode alterar o alinhamento dos itens flexíveis. As classes válidas são:

  • start(Padrão)
  • end
  • center
  • between
  • around

Exemplo

<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>

Experimente você mesmo

Largura igual

usar em itens flexíveis .flex-fill Pode-se forçá-los a ter a mesma largura:

Exemplo

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Item flexível 1</div>
  <div class="p-2 bg-warning flex-fill">Item flexível 2</div>
  <div class="p-2 bg-primary flex-fill">Item flexível 3</div>
</div>

Experimente você mesmo

Estender

usar em itens flexíveis .flex-grow-1 O espaço adicional pode ser ocupado. No exemplo a seguir, os dois primeiros itens flexíveis ocupam o espaço necessário, enquanto o último item ocupa o espaço disponível restante:

Exemplo

<div class="d-flex">
  <div class="p-2 bg-info">Item flexível 1</div>
  <div class="p-2 bg-warning">Item flexível 2</div>
  <div class="p-2 bg-primary flex-grow-1">Item flexível 3</div>
</div>

Experimente você mesmo

Dica:usar em itens flexíveis .flex-shrink-1 pode se contrair quando necessário.

Ordem

usar .order A classe pode alterar a ordem visual de um item flexível específico. Classes válidas de 0 a 5, onde o menor número tem a maior prioridade (order-1 é exibido antes de order-2, etc.):

Exemplo

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">Item flexível 1</div>
  <div class="p-2 bg-warning order-2">Item flexível 2</div>
  <div class="p-2 bg-primary order-1">Item flexível 3</div>
</div>

Experimente você mesmo

margem externa automática

usar .ms-auto(empurrando o item para a direita) ou usar .me-auto(empurrando o item para a esquerda) Adicionar margem automática aos itens flexíveis é fácil:

Exemplo

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">Item flexível 1</div>
  <div class="p-2 bg-warning">Item flexível 2</div>
  <div class="p-2 bg-primary">Item flexível 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">Item flexível 1</div>
  <div class="p-2 bg-warning">Item flexível 2</div>
  <div class="p-2 me-auto bg-primary">Item flexível 3</div>
</div>

Experimente você mesmo

Quebrar linha

através de .flex-nowrap(padrão),.flex-wrap ou .flex-wrap-reverseControla como os itens flexíveis são empacotados no contêiner flex.

Exemplo

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

Experimente você mesmo

Alinhar conteúdo

use .align-content-* Classe controla a alinhamento vertical de itens flexíveis. Classes válidas são:

  • .align-content-start(Padrão)
  • .align-content-end
  • .align-content-center
  • .alinhamento-conteúdo-entre
  • .alinhamento-conteúdo-sobre-o-lado
  • .alinhamento-conteúdo-estendido

Notas:Essas classes não têm efeito em itens elásticos de linha única.

Clique no botão abaixo para ver a diferença entre as cinco classes, alterando o alinhamento vertical dos itens elásticos na caixa de exemplo:

Exemplo

<div class="d-flex flex-wrap alinhamento-conteúdo-início">..</div>
<div class="d-flex flex-wrap alinhamento-conteúdo-fim">..</div>
<div class="d-flex flex-wrap alinhamento-conteúdo-centro">..</div>
<div class="d-flex flex-wrap alinhamento-conteúdo-sobre-o-lado">..</div>
<div class="d-flex flex-wrap alinhamento-conteúdo-estendido">..</div>

Experimente você mesmo

Alinhar itens

use .alinhamento-itens-* controle de classelinha únicamodo de alinhamento vertical do item elástico. Classes válidas são:

  • .alinhamento-itens-início
  • .alinhamento-itens-fim
  • .alinhamento-itens-centro
  • .alinhamento-itens-baseline
  • .alinhamento-itens-estendido(Padrão)

Clique no botão abaixo para ver a diferença entre as cinco classes:

Exemplo

<div class="d-flex alinhamento-itens-início">..</div>
<div class="d-flex alinhamento-itens-fim">..</div>
<div class="d-flex alinhamento-itens-centro">..</div>
<div class="d-flex alinhamento-itens-baseline">..</div>
<div class="d-flex alinhamento-itens-estendido">..</div>

Experimente você mesmo

alinhamento automático

use .alinhamento-vertical-* controle de classeespecificar item elásticomodo de alinhamento vertical. Classes válidas são:

  • .alinhamento-vertical-início
  • .alinhamento-vertical-fim
  • .alinhamento-vertical-centro
  • .alinhamento-vertical-baseline
  • .alinhamento-vertical-estendido(Padrão)

Clique no botão abaixo para ver a diferença entre os cinco tipos de classes:

Exemplo

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Item flexível 1</div>
  <div class="p-2 border align-self-start">Item flexível 2</div>
  <div class="p-2 border">Item flexível 3</div>
</div>

Experimente você mesmo

Classes Flexíveis Respondsivas

Todas as classes flexíveis têm classes de resposta adicionais, o que facilita a configuração de classes flexíveis específicas em tamanhos de tela específicos.

* pode ser substituído por sm, md, lg, xl ou xxl, representando pequena, média, grande, extra grande e extra extra grande tela, respectivamente.

Procurar classes flexíveis específicas ..

Classe Descrição Exemplo
Contêiner flexível
.d-*-flex Criar contêineres flexíveis para diferentes telas. Experimente
.d-*-inline-flex Criar contêineres flexíveis inline para diferentes telas. Experimente
Direção
.flex-*-row Mostrar itens flexíveis horizontalmente em diferentes telas. Experimente
.flex-*-row-reverse Mostrar itens flexíveis horizontal e à direita em diferentes telas. Experimente
.flex-*-column Mostrar itens flexíveis verticalmente em diferentes telas. Experimente
.flex-*-column-reverse Mostrar itens flexíveis em ordem inversa verticalmente em diferentes telas. Experimente
Conteúdo alinhado em linha
.justify-content-*-start Mostrar itens flexíveis no início (alinhamento à esquerda) em diferentes telas. Experimente
.justify-content-*-end Mostrar itens flexíveis no final (alinhamento à direita) em diferentes telas. Experimente
.justify-content-*-center Mostrar itens flexíveis no centro do contêiner flexível em diferentes telas. Experimente
.justify-content-*-between Mostrar itens flexíveis de forma igual em diferentes telas. Experimente
.justify-content-*-around Mostrar itens flexíveis ao redor das telas. Experimente
Preencher / Largura igual
.flex-*-fill Forçar que os itens flexíveis tenham a largura igual em diferentes telas. Experimente
Estender
.flex-*-grow-0 Não permitir que os itens se estendam em diferentes telas.
.flex-*-grow-1 Faz com que os itens se estendam em diferentes telas.
Recolher
.flex-*-shrink-0 Não permitir que itens encolham em diferentes telas.
.flex-*-shrink-1 Faça itens encolher em diferentes telas.
Ordem
.order-*-0-12 Mude a ordem de 0 a 12 em telas pequenas. Experimente
Quebrar linha
.flex-*-nowrap Não quebre linha de itens em diferentes telas. Experimente
.flex-*-wrap Quebre linha de itens em diferentes telas. Experimente
.flex-*-wrap-reverse Inverter quebra de linha de itens em diferentes telas. Experimente
Alinhar conteúdo
.align-content-*-start Alinhe itens no início de diferentes telas. Experimente
.align-content-*-end Alinhe itens no final de diferentes telas. Experimente
.align-content-*-center Alinhe itens no centro de diferentes telas. Experimente
.align-content-*-around Alinhe itens ao redor de diferentes telas. Experimente
.align-content-*-stretch Estique itens em diferentes telas. Experimente
Alinhar itens
.align-items-*-start Alinhe itens em uma única linha no início de diferentes telas. Experimente
.align-items-*-end Alinhe itens em uma única linha no final de diferentes telas. Experimente
.align-items-*-center Alinhe itens em uma única linha no centro de diferentes telas. Experimente
.align-items-*-baseline Alinhe itens em uma única linha no alinhamento base de diferentes telas. Experimente
.align-items-*-stretch Estique itens em uma única linha em diferentes telas. Experimente
Alinhar a si mesmo
.align-self-*-start Alinhe itens flexíveis no início de diferentes telas. Experimente
.align-self-*-end Alinhe itens flexíveis no final de diferentes telas. Experimente
.align-self-*-center Alinhe itens flexíveis no centro de diferentes telas. Experimente
.align-self-*-baseline Alinhe itens flexíveis no alinhamento base de diferentes telas. Experimente
.align-self-*-stretch Estique itens flexíveis em diferentes telas. Experimente