2.5 KiB
| title | localeTitle |
|---|---|
| CSS3 Flexible Box | Caixa Flexível CSS3 |
Caixa Flexível CSS3
O modelo Flexbox oferece uma maneira eficiente de layout, alinhamento e distribuição de espaço entre os elementos do documento, mesmo quando a viewport e o tamanho dos elementos são dinâmicos ou desconhecidos.
A ideia mais importante por trás do modelo Flexbox é que o contêiner pai pode alterar a largura / altura / ordem dos itens para melhor preencher o espaço disponível. Um contêiner de flexão expande os itens para preencher o espaço livre disponível ou os reduz para evitar estouro. 1
Uso básico
O Flexbox pode ser usado para centralizar qualquer quantidade de elementos dados dentro de um elemento. Um exemplo básico disso é o seguinte código:
css .center-elements-inside { display: flex; flex-direction: row; justify-content: center; }
Vamos quebrar este exemplo. Primeiro, definimos a propriedade de exibição como "flexível" para podermos aplicar nossas propriedades de flexbox. Em seguida, declaramos a maneira como o flexbox lidará com nossos elementos. Isso pode ser em uma linha ou em uma coluna. Configurá-lo para linha alinhará os elementos horizontais dentro do elemento. A coluna irá alinhá-los na vertical.
Agora vamos dar uma breve olhada em "justify-content". Esta propriedade declara como os elementos são distribuídos dentro do elemento pai. Nós escolhemos o valor "center". Isso significa que todos os elementos dentro desse elemento serão centralizados.
Mais Informações:
Para obter uma compreensão completa do Flexbox, leia Entendendo o Flexbox. Tudo o que você precisa saber na página do FreeCodeCamp Medium.
Para um guia interativo, vá até o Guia Completo do Flexbox - Aprendendo com os Exemplos
Ambos são ótimos recursos de Ohans Emmanuel.
Ainda outro grande guia visual que é detalhado, mas fácil de seguir, pode ser encontrado no Guia do Flexbox por CSS-Tricks.