Modelo de layout do CSS Flexbox | Explicado
Este artigo ajudará você nos seguintes aspectos do modelo CSS Flexbox:
- O que é modelo de layout do CSS Flexbox
- O que é um contêiner CSS Flex
- Recursos do modelo Flexbox
- Conceito básico de modelo de layout do CSS Flexbox
- Propriedades do Flexbox
- Exemplos
Então, vamos começar!
O que é modelo de layout do CSS Flexbox
É um módulo de layout flexível disponível no CSS3 que oferece uma maneira simples e clara de organizar elementos flexíveis dentro de um contêiner. Ajuda -nos a projetar o layout responsivo.
O que é um contêiner CSS Flex
Para trabalhar com o modelo Flexbox, primeiro precisamos entender o que é um contêiner flexível e, para fazer isso, vamos considerar a figura abaixo:
No trecho acima, a área cinza representa um recipiente flexível enquanto o item 1, item 2, etc. são seus itens. Portanto, podemos dizer que o contêiner Flex é uma caixa/contêiner que pode conter vários itens flexíveis.
Recursos do modelo Flexbox
O modelo de layout do CSS Flexbox fornece vários recursos, alguns deles estão listados abaixo:
- No modelo de layout do CSS Flexbox, não há carros alegóricos.
- O CSS Flexbox fornece um layout responsivo e amigável para dispositivos móveis.
- As margens do contêiner Flex não entram em colapso com as margens de seu conteúdo.
- Posicionar o elemento filho é muito fácil no modelo Flexbox.
- A ordem do elemento pode ser alterada facilmente sem editar a fonte HTML.
Conceito básico de modelo de layout do CSS Flexbox
Alguns dos conceitos básicos do modelo de layout do CSS Flexbox estão listados abaixo:
- O modelo CSS Flexbox tem a capacidade de alterar a altura e a largura do elemento para o melhor ajuste no espaço livre disponível do contêiner.
- O Flexbox é de direção agnóstico, o que significa que os elementos do Flexbox podem ser organizados horizontalmente e verticalmente, dependendo dos requisitos.
Propriedades do Flexbox
Para projetar um layout responsivo, uma vasta gama de propriedades flexíveis está disponível no CSS3, conforme descrito nas tabelas abaixo do rumo:
Tabela 1
| Propriedades | Descrição |
|---|---|
| mostrar | Determina o tipo de contêiner flexível, i.e., Em linha, bloco. |
| Direcção flexível | Especifica a direção dos itens dentro do contêiner, como fundo, esquerda-direita, etc. |
| FLEX-EMPRAÇÃO | Determina se os itens devem ser embrulhados ou não. |
| FLOW FLEX | Fornece as funcionalidades do fluxo flexível e do flexão flexível. |
| Justify-Content | Alinha os itens/elementos ao longo do eixo principal. |
| alinhado-itens | Alinha os elementos ao longo do eixo cruzado. |
| Alinhado | Alinha as linhas do contêiner flexível. |
| brecha | Controla explicitamente os espaços entre os itens flexíveis. |
Mesa 2
| Propriedades | Descrição |
|---|---|
| ordem | Ele controla a ordem dos elementos filhos dentro do contêiner flexível. |
| Grow Flex | Determina o fator de crescimento para um item flexível. |
| Flex-Shrink | Determina o fator de encolhimento para elementos filhos/itens flexíveis. |
| Flex-Basis | Ele determina o tamanho padrão do elemento filho/item flexível. |
| flex | É usado para alcançar as funcionalidades de três propriedades i.e. Flex-Grow, Flex-Shrink e Flex-Basis. |
| alinhado | Permite que o alinhamento padrão (ao longo do eixo cruzado) seja substituído para o elemento infantil individual. |
As propriedades descritas na Tabela 1 são conhecidas como contêiner flex ou elemento pai propriedades, enquanto as descritas na Tabela 2 são conhecidas como itens flexíveis ou elemento filho propriedades.
Exemplos
Nesta seção, implementaremos as propriedades de Itens Flexbox e Flexbox acima acima.
Exemplo de Flexbox
Primeiro item
Segundo item
Terceiro item
Quarto item
Quinto item
No trecho de código acima, utilizamos várias propriedades flexíveis de contêiner e itens flexíveis, como exibição, direção flexível, itens alinhados, lacuna e crescimento flexível, que definirão a tela flexível, a direção reversa da linha, o alinhamento esticado, as linhas de 5px e 50px colunas lacunas, respectivamente, e o terceiro item crescerá duas vezes mais rápido que outros elementos:
A saída verifica o funcionamento das propriedades do CSS Flexbox.
Conclusão
O modelo CSS Flexbox oferece uma maneira fácil e limpa de organizar itens do Flexbox dentro de um contêiner. Ele fornece inúmeros recursos, como design responsivo, alinhamento simples de elementos, etc. Além disso, inúmeras propriedades podem ser usadas para projetar e alinhar os itens de uma maneira melhor, como direção flexível, embalar flexível, alinhamento, ordem, crescimento flexível, etc. Este artigo discutiu o modelo de layout do Flexbox, o Flex Container e suas propriedades.