Flex
- Flex
- Justify Content
- Align Items
- Align Self
- Align Content
- Grow shrink
- Wrap
- Order
- Outros
Flexível [ Flex ]
Aplique utilitários de exibição para criar um container flexbox e transformar elementos filhos diretos em itens flexíveis. Os containers e itens flexíveis podem ser modificados ainda mais com propriedades flexíveis adicionais.
.d-f - display: flex;
.d-if - display: inline-flex;
<div class="d-f e1">Eu amo flexbox container!</div>
<div class="d-if e6">Eu amo flexbox container!</div>
Flex Direction
Use .f-r para definir uma direção horizontal (o padrão do navegador) ou .f-rr para iniciar a direção horizontal do lado oposto.
Use .f-c para definir uma direção vertical ou .f-cr para iniciar a direção vertical do lado oposto.
.f-f - flex: 1 1 auto;
.f-r - flex-direction: row;
.f-c - flex-direction: column;
.f-rr - flex-direction: row-reverse;
.f-cr - flex-direction: column-reverse;
<div class="d-f f-r">
<div class="e1">01</div>
<div class="e1">02</div>
<div class="e1">03</div>
</div>
<div class="d-f f-rr">
<div class="e1">01</div>
<div class="e1">02</div>
<div class="e1">03</div>
</div>
<div class="d-f f-c mf4">
<div class="e1">01</div>
<div class="e1">02</div>
<div class="e1">03</div>
</div>
<div class="d-f f-cr">
<div class="e1">01</div>
<div class="e1">02</div>
<div class="e1">03</div>
</div>
Justificar o Conteúdo [ Justify Content ]
Use utilitários just-c em container flexbox para alterar o alinhamento dos itens flexíveis no eixo principal (o eixo x para iniciar, eixo y se direção flexível: coluna). Escolha entre D (padrão do navegador), fim, centro, meio, ao redor ou uniformemente.
.just-c-s - justify-content: flex-start - Inicio;
.just-c-e - justify-content: flex-end - Fim;
.just-c-c - justify-content: center - Meio;
.just-c-b - justify-content: space-between - Toda Area;
.just-c-a - justify-content: space-around - Em volta;
.just-c-v - justify-content: space-evenly - Uniformemente;
<div class="d-f just-c-s mf4">
<div class="e1">Esquerda</div>
<div class="e1">Centro</div>
<div class="e1">Start</div>
</div>
<div class="d-f just-c-e mf4">
<div class="e1">Esquerda</div>
<div class="e1">Centro</div>
<div class="e1">End</div>
</div>
<div class="d-f just-c-c mf4">
<div class="e1">Esquerda</div>
<div class="e1">Centro</div>
<div class="e1">Center</div>
</div>
<div class="d-f just-c-b mf4">
<div class="e1">Esquerda</div>
<div class="e1">Centro</div>
<div class="e1">Entre</div>
</div>
<div class="d-f just-c-a mf4">
<div class="e1">Esquerda</div>
<div class="e1">Centro</div>
<div class="e1">Em volta</div>
</div>
<div class="d-f just-c-v">
<div class="e1">Esquerda</div>
<div class="e1">Centro</div>
<div class="e1">Uniforme</div>
</div>
Alinhar Itens [ Align Items ]
Use utilitários de alinhamento de itens em contêineres flexbox para alterar o alinhamento de itens flexíveis no eixo cruzado (o eixo y para iniciar, eixo x se direção flexível: coluna). Escolha entre início, fim, centro, linha de base ou alongamento (padrão do navegador).
.align-i-s - align-items: flex-start - Início;
.align-i-e - align-items: flex-end - Fim;
.align-i-c - align-items: center - Meio;
.align-i-b - align-items: baseline - Alinhar base;
.align-i-st - align-items: stretch - Esticar;
<div class="d-f just-c-c align-i-s mf1" style="height: 100px">
<div class="e4">Esquerda</div>
<div class="e4">Centro</div>
<div class="e4">Direita</div>
</div>
<div class="d-f just-c-c align-i-e mf1" style="height: 100px">
<div class="e4">Esquerda</div>
<div class="e4">Centro</div>
<div class="e4">Direita</div>
</div>
<div class="d-f just-c-c align-i-c mf1" style="height: 100px">
<div class="e4">Esquerda</div>
<div class="e4">Centro</div>
<div class="e4">Direita</div>
</div>
<div class="d-f just-c-c align-i-b mf1" style="height: 100px">
<div class="e4">Esquerda</div>
<div class="e4">Centro</div>
<div class="e4">Direita</div>
</div>
Alinhar-se [ Align Self ]
Use os utilitários align-s em itens flexbox para alterar individualmente seu alinhamento no eixo transversal (o eixo y para start, 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).
.align-s-a - align-self: auto;
.align-s-s - align-self: flex-start - Início;
.align-s-e - align-self: flex-end - Fim;
.align-s-c - align-self: center - Meio;
.align-s-b - align-self: baseline - alinhar Base;
.align-s-st - align-self: stretch - Esticar;
<div class="d-f just-c-c mf1" style="height: 100px">
<div class="e1">Esquerda</div>
<div class="align-s-s e1">Centro</div>
<div class="e1">Direita</div>
</div>
<div class="d-f just-c-c mf1" style="height: 100px">
<div class="e1">Esquerda</div>
<div class="align-s-e e1">Centro</div>
<div class="e1">Direita</div>
</div>
<div class="d-f just-c-c mf1" style="height: 100px">
<div class="e1">Esquerda</div>
<div class="align-s-c e1">Centro</div>
<div class="e1">Direita</div>
</div>
<div class="d-f just-c-c mf1" style="height: 100px">
<div class="e1">Esquerda</div>
<div class="align-s-b e1">Centro</div>
<div class="e1">Direita</div>
</div>
<div class="d-f just-c-c" style="height: 100px">
<div class="e1">Esquerda</div>
<div class="align-s-st e1">Centro</div>
<div class="e1">Direita</div>
</div>
Alinhar Conteúdo [ Align Content ]
Use os utilitários align-content em container flexbox para alinhar itens flex juntos no eixo transversal. Escolha entre start (padrão do navegador), end, center, between, around ou stretch. Para demonstrar esses utilitários, aplicamos flex-wrap: wrap e aumentamos o número de itens flex.
Atenção! Esta propriedade não tem efeito em linhas únicas de itens flexíveis.
.align-c-s - align-content-start - Início;
.align-c-e - align-content-end - Fim;
.align-c-c - align-content-center - Meio;
.align-c-b - align-content-between - Entre;
.align-c-b - align-content-around - Em volta;
.align-c-st - align-content-stretch - Esticar;
.align-c-s
<div class="d-f align-c-s f-wr mf1" style="height: 250px">
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
</div>
.align-c-e
<div class="d-f align-c-e f-wr mf1" style="height: 250px">
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
</div>
.align-c-c
<div class="d-f align-c-c f-wr mf1" style="height: 250px">
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
</div>
.align-c-b
<div class="d-f align-c-b f-wr mf1" style="height: 250px">
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
</div>
.align-c-a
<div class="d-f align-c-a f-wr mf1" style="height: 250px">
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
</div>
.align-c-st
<div class="d-f align-c-st f-wr mf1" style="height: 250px">
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
</div>
Crescer e encolher [ Grow e shrink ]
Use os utilitários .f-g* para alternar a capacidade de um item flexível crescer para preencher o espaço disponível. No exemplo abaixo, os elementos .f-g1 usam todo o espaço disponível que podem, enquanto permitem aos dois itens flexíveis restantes o espaço necessário.
Use os utilitários .f-s* para alternar a capacidade de vermução de um item flexível, se necessário. No exemplo abaixo, o segundo item flexível com .f-s1 é forçado a agrupar seu conteúdo em uma nova linha, “encolhendo” para permitir mais espaço para o item flexível anterior com .wp100.
.f-g0 - flex-grow: 0;
.f-g1 - flex-grow: 1;
.f-s0 - flex-shrink: 0;
.f-s1 - flex-shrink: 1;
.f-wr - flex-wrap: wrap;
.f-nowr - flex-wrap: nowrap;
.f-wr-r - flex-wrap: wrap-reverse;
<div class="d-f">
<div class="e1 f-g1">01</div>
<div class="e1">02</div>
<div class="e1">03</div>
</div>
<div class="d-f">
<div class="e1 wp100">01</div>
<div class="e1 f-s1">02</div>
</div>
Enrolar [ Wrap ]
Altere a forma como os itens flexíveis são agrupados em um contêiner flexível. Escolha entre nenhum empacotamento (o padrão do navegador) com .f-nowr, empacotamento com .f-wr ou empacotamento reverso com .f-wr-r.
.f-wr - flex-wrap: wrap;
.f-nowr - flex-wrap: nowrap;
.f-wr-r - flex-wrap: wrap-reverse;
<div class="d-f f-nowr e1" style="width: 180px;">
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
<div class="e1">Conteúdo</div>
</div>
<div class="d-f f-wr">
<div class="e1">Conteúdo 1</div>
<div class="e1">Conteúdo 2</div>
<div class="e1">Conteúdo 3</div>
<div class="e1">Conteúdo 4</div>
<div class="e1">Conteúdo 5</div>
<div class="e1">Conteúdo 6</div>
<div class="e1">Conteúdo 7</div>
<div class="e1">Conteúdo 8</div>
<div class="e1">Conteúdo 9</div>
<div class="e1">Conteúdo 10</div>
<div class="e1">Conteúdo 11</div>
<div class="e1">Conteúdo 12</div>
<div class="e1">Conteúdo 13</div>
<div class="e1">Conteúdo 14</div>
</div>
<div class="d-f f-wr-r">
<div class="e1">Conteúdo 1</div>
<div class="e1">Conteúdo 2</div>
<div class="e1">Conteúdo 3</div>
<div class="e1">Conteúdo 4</div>
<div class="e1">Conteúdo 5</div>
<div class="e1">Conteúdo 6</div>
<div class="e1">Conteúdo 7</div>
<div class="e1">Conteúdo 8</div>
<div class="e1">Conteúdo 9</div>
<div class="e1">Conteúdo 10</div>
<div class="e1">Conteúdo 11</div>
<div class="e1">Conteúdo 12</div>
<div class="e1">Conteúdo 13</div>
<div class="e1">Conteúdo 14</div>
</div>
Ordem [ Order ]
Altere a ordem visual de itens flex específicos com um punhado de utilitários de ordem. Nós fornecemos apenas opções para tornar um item o primeiro ou o último, bem como uma redefinição para usar a ordem DOM. Como a ordem aceita qualquer valor inteiro de 0 a 5, adicione CSS personalizado para quaisquer valores adicionais necessários.
.or-f - order: -1;
.or-0 - order: 0;
.or-1 - order: 1;
.or-2 - order: 2;
.or-3 - order: 3;
.or-4 - order: 4;
.or-5 - order: 5;
.or-l - order: 6;
<div class="d-f f-nowr">
<div class="or-3 e1">01</div>
<div class="or-2 e1">02</div>
<div class="or-1 e1">03</div>
</div>
<div class="d-f f-rr">
<div class="or-1 e1">01</div>
<div class="or-2 e1">02</div>
<div class="or-3 e1">03</div>
</div>
Preenchimento flexível [ Flex Fill ]
Use a classe .f-f em uma série de elementos irmãos para forçá-los a ter larguras iguais ao seu conteúdo (ou larguras iguais se o conteúdo não ultrapassar suas caixas de borda) enquanto ocupa todo o espaço horizontal disponível.
.f-f - flex: 1 1 auto;
<div class="d-f">
<div class="e1 f-f">Conteúdo com Maior Texto</div>
<div class="e1 f-f">Conteúdo</div>
<div class="e1 f-f">Conteúdo</div>
</div>