21 coisas sobre Flexbox em CSS que aprendi com o freeCodeCamp

tl;dr: tantos anos sem saber que a possível resolução de vários probleminhas chatos de layout podiam ser resolvidos com flexbox… próximo passo css grid.

---

CSS: Como se ativa um flex container em um elemento?

display: flex;

CSS: Como se define a direção de um flex container?

flex-direction

CSS: Quais os dois tipo de de direção que podem ser definidas em uma flex-direction?

linhas (row) e colunas (column)

CSS: Que tipo de row pode ser definida em uma flex-direction?

row e row-reverse

CSS: Que tipo de coluna pode ser definida em uma flex-direction?

column e column-reverse

CSS: Qual é o padrão de uma flex-direction?

row

CSS: Qual propriedade configura a justificação de conteúdo em um flex container?

justify-content

CSS: Como se centraliza os flex itens em um flex container?

justify-content: center;

CSS: Como você alinha os flex itens no início do flex container?

justify-content: flex-start;

CSS: Como você alinha os flex itens no final do flex container?

justify-content: flex-end;

CSS: O que “justify-content: space-between;” faz?

Alinha os flex itens deixando espaço entre eles, e o primeiro e último colados no canto do container.

CSS: O que “justify-content: space-around;” faz?

Alinha os flex itens deixando espaço entre eles, mesmo o primeiro e o último.

CSS: Qual propriedade alinha os flex item no eixo cruzado do flex container?

align-items

CSS: O que “align-items: center;” faz?

Alinha os flex itens no centro do eixo cruzado.

CSS: O que “align-center: stretch;” faz?

Expande os flex itens até eles preencherem o cross axis do flex container.

CSS: Qual propriedade faz com que os flex itens quebrem de linha caso não caibam na linha?

flex-wrap: wrap;

CSS: Qual propriedade faz um flex item diminuir de tamanho individualmente?

flex-shrink

CSS: Qual propriedade faz um flex item aumentar de tamanho individualmente?

flex-grow

CSS: Qual propriedade define o tamanho inicial base de um flex item?

flex-basis

CSS: Qual propriedade muda a ordem que os flex itens são apresentados?

order

CSS: Qual propriedade alinha o flex item individualmente?

align-self