O layout flexível que surgiu como solução para o desenvolvimento de layouts, mas pode gerar confusão na cabeça de muitos, principalmente se você está começando agora no mundo do desenvolvimento front-end
Neste livro você vai entender e aprender como utilizar de forma simples as estruturas e propriedades do Flexbox de uma vez por todas.
O guia completo do Flexbox
A estrutura do layout flexível tende a gerar alguma confusão para quem estava acostumado a construir grids manualmente ou utilizando CSS.
E mesmo hoje, quase 3 anos após a definição padronizada do Flexbox pela W3C, ainda muita gente se assusta ou não faz ideia de como extrair todas as melhores funcionalidades que o layout flexível funciona.
Veja um trecho do guia:
Conceito
O conceito do layout flexível é justamente o que o nome sugere: Flexibilidade.
A ideia por trás do flexbox é que ele se comporte como a água, que se adapta ao recipiente. E isso é extremamente útil em basicamente duas situações:
Layout responsivo: Quando uma mesma página web pode ser utilizada em dispositivos com resoluções bastante diferentes.
Layouts dinâmicos: Quando a exibição do conteúdo tende a mudar, como no caso de um quadro de fotos ou uma listagem de dados dinâmicos. Por exemplo: como o layout é exibido se existe um único item? E quando existem 2? E quando são 3?
Estrutura
Entender a estrutura do Flexbox é importantíssimo para dominar todas as funcionalidades que ele oferece.
De forma macro, o Flexbox se divide em 3 partes:
– Container
– Eixos
– Item
O container é o recipiente que contém o conteúdo flexível.
No CSS, este container é definido com display: flex;
Observe: Tudo o que estiver dentro do container se comportará como um item flexível.
Importante: Este comportamento não é herdado pelos itens flexíveis.
Para que um item flexível se comporte como um container flexível, a declaração display: flex; deve ser definida de forma explícita.
Essa funcionalidade é extremamente útil, pois possibilita termos controle total de como queremos renderizar todas as informações.
Você verá mais detalhes sobre isso adiante.
O container possui dois eixos, e isso define toda a estrutura de alinhamento e disposição dos elementos flexíveis.
Os eixos funcionam como no plano cartesiano que aprendemos na matemática: Um define a horizontal (a conhecida como reta X) e o outro a vertical (reta Y).
A grande sacada, é entender que é possível inverter a posição desses eixos.
Então, é importante lembrar que o flexbox trabalha com: Eixo principal e eixo transversal.
A definição do eixo é feita através da propriedade flex-direction. Que pode ser row (que é a padrão)ou column.
Saber qual a direção do container (qual eixo principal está definido para este container) é essencial para saber como os itens dentro do container irão se comportar.
Quando a definição de flex-direction é row, o eixo principal é o horizontal e o transversal é a vertical.
Quando flex-direction estiver definido como column, o eixo principal é a vertical, e o transversal é o eixo horizontal.
E essa definição impacta no comportamento de propriedades como:
