Layout de caixa flexível CSS - CSS Flexible Box Layout

Layout de caixa flexível CSS , comumente conhecido como Flexbox , é um modelo de layout web CSS 3 . Ele está no estágio de recomendação de candidato (CR) do W3C . O layout flexível permite que os elementos responsivos em um contêiner sejam organizados automaticamente, dependendo do tamanho da tela (ou dispositivo).

Conceitos

A maioria das páginas da web é escrita em uma combinação de HTML (Hypertext Markup Language) e CSS (Cascading Style Sheets). Resumindo, o HTML especifica o conteúdo e a estrutura lógica da página , enquanto o CSS especifica sua aparência : suas cores, fontes, formatação, layout e estilo.

O layout flex-box CSS é uma maneira particular de especificar o layout de páginas HTML.

Um dos recursos mais marcantes do layout flexível é sua capacidade de se ajustar à forma, com base em seu ambiente de visualização. As caixas flexíveis podem se ajustar ao tamanho - diminuindo, para evitar monopolização desnecessária do espaço, ou aumentando para abrir espaço para o conteúdo ser restringido dentro de seus limites. Além disso, o layout flexível é menos restritivo em termos de fluxo de conteúdo do que aqueles, por exemplo, dos tipos de exibição em bloco e em linha, que geralmente são unidirecionais. O fluxo direcional de flex pode ser especificado como para a direita, para a esquerda, para cima ou para baixo. Itens individuais dentro de um contêiner flexível também podem ser reordenados e reorganizados automaticamente para se adequar ao espaço de layout disponível.

História

Na década de 2000, o uso intensivo da Web por agentes móveis motivou "layouts líquidos" e elementos responsivos para a crescente variedade de tamanhos de tela. Na década de 2010, o uso intensivo de estruturas de layout JavaScript populares, como Bootstrap , inspirou CSS flex-box e especificações de layout de grade.

Os módulos CSS 3 incluíram soluções semelhantes a esta, como flexbox e grade .

Em setembro de 2020, 98,69% dos navegadores instalados (99,29% dos navegadores de desktop e 100% dos navegadores móveis) suportam Layout de caixa flexível CSS.

Terminologia

Os termos a seguir estão associados ao modelo de layout flexbox.

Recipiente flexível

Elemento pai que contém todos os itens flexíveis. Usando a propriedade display CSS, o contêiner pode ser definido como flex ou inline-flex.

Item flexível

Qualquer elemento filho direto mantido dentro do flex container é considerado um flex item. Qualquer texto dentro do elemento contêiner é empacotado em um item flexível desconhecido.

Machados

Cada caixa flexível contém dois eixos: o eixo principal e o eixo transversal. O eixo principal é aquele em que os itens se alinham. O eixo cruzado é perpendicular ao eixo principal.

Direção flexível

Estabelece o eixo principal. Argumentos possíveis: linha (padrão), reverso de linha, coluna, reverso de coluna.

Justify-content

Determina como o conteúdo é colocado no eixo principal da linha atual. Argumentos opcionais: esquerda, direita, centro, espaço entre, espaço ao redor.

Alinhar-itens

Determina o padrão de como os itens flexíveis são colocados no eixo cruzado de cada linha.

Alinhar-conteúdo

Determina o padrão de como as linhas do eixo cruzado são alinhadas.

Alinhar-se

Determina como um único item é colocado ao longo do eixo cruzado. Isso substitui quaisquer padrões definidos por itens de alinhamento.

instruções

início cruzado

cross-end

Os lados do início / fim cruzado determinam onde as linhas flexíveis são preenchidas com itens flexíveis do início ao fim.

main-start

extremidade principal

Os lados do início principal / final principal determinam onde começar a colocar os flex items dentro do flex container, começando do main-start end e indo até o main end end.

Pedido

Coloca elementos em grupos e determina em qual ordem eles devem ser colocados dentro do contêiner.

Flex-flow

Abrevia direção flexível e envoltório flexível para inserir o conteúdo flexível.

Linhas

Linhas

Os itens flexíveis podem ser colocados em uma linha única ou em várias linhas, conforme definido pela propriedade flex-wrap, que controla a direção do eixo cruzado e como as linhas são empilhadas dentro do contêiner.

Dimensões

Tamanho principal

Tamanho cruzado

O tamanho principal e o tamanho transversal são a altura e a largura do flex container, cada um lidando com os eixos principal e transversal, respectivamente.

Uso

Designar um elemento como um elemento flex requer a configuração da propriedade de exibição CSS do elemento como flex ou inline-flex, da seguinte maneira:

display: flex;

Ou:

display: inline-flex;

Ao definir a exibição para um dos dois valores acima, um elemento se torna um flex container e seus filhos flex items. Definir a exibição como flex torna o contêiner um elemento de nível de bloco , enquanto definir a exibição como flexivel torna o contêiner um elemento de nível embutido .

Alinhar ao centro

Uma das vantagens do flexbox é a capacidade de alinhar facilmente itens dentro do contêiner ao centro de uma página, tanto vertical quanto horizontalmente.

display: flex;
align-items: center;
justify-content: center;

Referências