Categorias
Geral

CSS3 Flexbox para quem Não sabe nada de Flexbox.

Flexbox.

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:

– justify-content

– align-items

– align-content

– align-self

flex-basis

– flex-shrink

– flex-grow

Adquira este livro completo na Amazon por apenas R$ 9,90

Exemplo de formulário com Flexbox

Acesse no CodePen: Form com Pure CSS by dorian (@dorian_oliveiraoficial) on CodePen.

Gosto sempre de frisar: Treine sempre, pratique sempre. Estude, leia outros materiais e artigos.

Se quiser se se aprofundar no assunto, é só clicar neste link aqui embaixo e adquirir o livro direto na Amazon:

Continue lendo este livro clicando aqui