Classes Flexbox no Bootstrap 5 | Explicado
Este artigo trata das aulas Flex no Bootstrap 5 e os seguintes pontos são discutidos em detalhes detalhados
- Contêineres flexbox
- Instruções Flexbox
- Justificar conteúdo
- Alinhe itens
- Aulas de embrulho
- Alinhe -se
Bootstrap 5 classes flexíveis
D-Flex
No Bootstrap 5, os recipientes flexionários são criados usando o .D-Flex aula. D-Flex O contêiner de classe se expande para a largura total, o que significa que ele se expande para a largura da tela, mas o item nele se expande de acordo com o conteúdo deles.
Código
Box1
Box2
Box3
Box4
.D-*-Flex também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
D-Inline-Flex
No Bootstrap 5, os recipientes flexionários são criados usando o .D-Inline-Flex aula. D-Inline-Flex O contêiner de classe se expande de acordo com o número de itens e os itens da área de conteúdo cobertos.
Código
Box1
Box2
Box3
Box4
.D-*-Inline-Flex também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Direções flexíveis
Flex-robeira-reversa
.Flex-robeira-reversa A classe é usada para alterar a direção dos itens ao contrário. Esta classe Flexbox é usada apenas com o .linha aula. Esta classe também será usada com diferentes pontos de interrupção
Código
Box1
Box2
Box3
Box4
.flex-*-reversa de linha também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Coluna flexível
.coluna flexível A classe é usada para converter linhas em colunas. Esta aula também é usada com o .linha aula.
Código
Box1
Box2
Box3
Box4
.Flex-*-coluna também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Flex-Column-Revery
.Flex-Column-Revery classe, converte linhas em colunas e também mude a direção dos itens flexíveis ao contrário. Esta aula também é usada com .linha aula.
Código
Box1
Box2
Box3
Box4
.flex-*-coluna-reversa também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
FLEX-EMPRAÇÃO
.FLEX-EMPRAÇÃO A classe é usada para envolver os itens dentro do recipiente e com esta classe o transbordamento dos itens flexíveis é gerenciado. Por padrão, os itens estão embrulhados, mas você ainda pode usar esta classe para envolver os itens que
transborda o contêiner flexível.
Código
Box1
Box2
Box3
Box4
.Flex-*-envolve também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Flex-Nowrap
.Flex-Nowrap A classe é usada onde você não deseja que seus itens flexíveis sejam embrulhados porque, por padrão, os itens flexíveis são embrulhados dentro do recipiente flex.
Código
Box1
Box2
Box3
Box4
.Flex-*-Nowrap também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Flex-Wrap-Revery
.Flex-Wrap-Revery A classe não é usada apenas para envolver itens flexíveis dentro de um recipiente, mas também reverter seu pedido.
Código
Box1
Box2
Box3
Box4
.Flex-*-Wrap-Revery também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Preenchimento flexível
.preenchimento flexível A classe é usada apenas com o .CLASSE COL sem ponto de interrupção ou largura. A classe de preenchimento flexível leva a 100% de largura do recipiente e força os outros itens flexíveis a dividir o espaço igualmente. A classe de preenchimento flexível pode ser aplicada em vários itens flexíveis e apenas nos itens flexíveis.
Código
Box1
Box2
Box3
Box4
.Flex-*-preencha também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Justificar conteúdo
As classes de conteúdo da justificativa são usadas para justificar itens flexíveis em uma direção de linha ou em outras palavras ao longo do eixo principal.
Justify-Content-Start
.Justify-Content-Start classe, move os itens flexíveis para o lado esquerdo do contêiner. Esta classe é usada apenas com o .classe D-Flex.
Código
Box1
Box2
Box3
Box4
Box5
.Justify-Content-*-Iniciar também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Justificar o conteúdo do conteúdo
.justificar o conteúdo do conteúdo classe, move os itens flexíveis para o lado direito do contêiner. Esta classe é usada apenas com o .D-Flex aula.
Código
Box1
Box2
Box3
Box4
Box5
.Justify-Content-*-final também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Justificar-content-center
.justificar-content-center classe, junte todos os itens flexíveis no centro do contêiner. Esta classe é usada apenas com o .D-Flex aula.
Código
Box1
Box2
Box3
Box4
Box5
.Justify-Content-*-Centro também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Justify-Content-between
.Justify-Content-between A classe é usada para colocar espaços entre os itens flexíveis. Esta aula coloca o primeiro item flexível no início do contêiner e o último item flexível no final do contêiner e divide todo o espaço igualmente entre os itens flexíveis restantes .Esta classe é usada apenas com o .D-Flex aula.
Código
Box1
Box2
Box3
Box4
Box5
.Justify-Content-*-entre também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Justificar-conte-se-around
.justificar-conte-se-around A classe é usada para dividir o espaço igualmente entre todos os itens flexíveis. Esta classe é usada apenas com o .D-Flex aula.
Código
Box1
Box2
Box3
Box4
Box5
.Justify-Content-*-ao redor também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Alinhe o conteúdo
Alinhar classes de conteúdo são usadas para alinhar o conteúdo na direção da coluna ou, em outras palavras, apenas ao longo do eixo cruzado. Para alinhar os itens flexíveis, use o .classe D-Flex com o .FLEX-EMPRAÇÃO aula.
Alinhe-itens-start
.alinhe-itens-start classe, alinhe os itens flexíveis na parte superior do contêiner.
Código
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
Box9
Box10
Box11
Box12
.alinhe-itens-*-Iniciar também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Alinhe-itens-final
.alinhe-itens-final classe, alinhe os itens flexíveis na parte inferior do contêiner.
Código
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
Box9
Box10
Box11
Box12
.alinhe-itens-*-fim também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Alinhe-itens-center
.alinhe-itens-center classe, centralizada verticalmente os itens flexíveis em um contêiner.
Código
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
Box9
Box10
Box11
Box12
.Align-itens-*-Centro também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Alinhamento-itens-base
.alinhamento-itens-base classe, alinhe o conteúdo nas caixas de acordo com o eixo principal devido a quais itens do contêiner estão alinhados automaticamente na direção vertical.
Código
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
.Align-itens-*-linha de base também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Alinhamento-itens-stretch
.alinhamento-itens-stretch classe, expanda os itens flexíveis verticalmente de acordo com a altura do contêiner.
Código
Box1
Box2
Box3
Box4
.alinhe-itens-*-alongamento também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essa classe responsiva para outras telas também.
Alinhe -se
.alinhado aula é exatamente como .alinhado-itens classe, mas a diferença entre as duas classes é .Align-Items é aplicado no recipiente flexível e trata todos os itens flexíveis com a mesma classe usada pelo contêiner Flex naquele momento, mas o .alinhado A classe é aplicada em um único item flexível e trata um único item flexível.
A seguir estão o .Classes alinhadas que são usadas em itens flexíveis
- .Align-Self-Start
- .alinhado-end-end
- .Centro de Alinhamento
- .linha de base do alinhamento
- .Alinhado-Stretch
.Align-Self-*-START/END/CENTER/BASELING/STACK também é usado com pontos de interrupção, apenas substitua o (*) Símbolo com XXL, XL, LG, MD ou SM. Usar pontos de interrupção torna essas classes responsivas para outras telas também.
Conclusão
As classes Flexbox são usadas com a classe D-Flex no Bootstrap 5 para justificar, alinhar e gerenciar o conteúdo em linhas ou em colunas. Nas aulas de contêineres flexíveis do artigo acima, aulas de direção flexível, aulas de embrulho, aulas de justificativa flexível para justificar os itens seguidos, alinhar as aulas de alinhamento para alinhar o conteúdo na coluna e as classes para alinhar os próprios itens são discutidas em detalhes.