Aprendendo Flexbox

O Flexible Box Module, geralmente chamado de flexbox, foi projetado tanto como um modelo de layout unidimensional quanto como um método capaz de organizar espacialmente os elementos em uma interface, além de possuir capacidades avançadas de alinhamento.

Quando se descreve o flexbox como sendo unidimensional, enfatiza-se o fato de que ele lida com o layout em uma dimensão de cada vez – seja uma linha ou uma coluna.

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox

Todo container criado no HTML vem com uma propriedade padrão. Se você cria um contêiner e não adicionar nenhuma propriedade a ele, o mesmo fica com “display: block” por padrão.

Exemplo:

<ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

O código acima se não for adicionado a propriedade flex no elemento pai que é a <ul> ele ficará semelhante a imagem abaixo.

Se for adicionado a propriedade: “flex” ele ficará semelhante a imagem abaixo:

A propriedade “flex-direction” deve ser aplicada sempre no contêiner pai, ela irá definir o eixo de exibição dos contêiner filhos. Podendo ser na vertical ou na horizontal.

Confira abaixo todos os valores possíveis para essa propriedade.

flex-direction: [row / row-reverse / column / column-reverse];

row – os valores padrão do display: flex, caso não seja aplicado nenhum valor ele sempre ficará em linha.

row-reverse – deixa os contêineres em ordem reversa do maior para o menor.

column – deixa os itens em coluna, semelhante ao “display: block“.

column-reverse – deixa os itens em coluna em ordem reversa do maior para o menor.

Por padrão todo contêiner que está com o “display flex“, farão seus filhos tentarem se ajustar em uma única linha, pois ele está com a propriedade “nowrap” setada.

Para mudar esse comportamento podemos usar o “flex-wrap“, para que quando não houver mais espaço dentro do contêiner ocorra uma  “quebra de linha“.

Confira abaixo todos os valores possíveis para essa propriedade.

flex-wrap: [nowrap / wrap / wrap-reverse];

nowrap – Todos os itens ficarão na mesma linha independente do tamanho do contêiner.

wrap – Fara com que ocorra a quebra de linha quando não houver mais espaço no contêiner.

wrap-reverse – Fara com que a quebra de linha seja reversa, quando não houver mais espaço o item que iria para baixo fica em cima dos demais elementos.

O flex-flow é uma forma de abreviar as duas propriedades anteriores, “flex-direction” e “flex-wrap”. exatamente nesta ordem

Normalmente essas propriedades são aplicadas uma de cada vez. conforme exemplo abaixo:

.container {
     flex-direction: column;
     flex-wrap: wrap
}

Usando o flex-flow podemos fazer isso de uma forma mais simples economizando linhas de código conforme exemplo abaixo:

.container {
     flex-flow: column wrap;
}

A propriedade “justify-content” é responsável por alinhar os itens de dentro do contêiner pai ao longo do eixo principal. As direções podem ser row(linha) o column(coluna).

O valor padrão é “flex-start” todos os itens ficarão alinhados a esquerda do contêiner se for row, ou acima do contêiner se for column.

Valores da propriedade:

justify-content: [flex-start/flex-end/center/space-between/space-around];

flex-start : Os itens são alinhados a partir do início do eixo principal;

flex-end: Os itens são alinhados a partir do fim do eixo principal;

center: Os itens são alinhados ao centro do eixo principal;

space-between: O primeiro item é deslocado para o início do eixo principal, o último é deslocado para o final do eixo principal e os demais são distribuídos uniformemente entre eles;

space-around: Os itens são uniformemente distribuídos ao longo do eixo principal com margens esquerda e direita iguais, ou acima e abaixo caso esteja como column.

space-evenly: Os itens são distribuídos uniformemente dentro do contêiner de alinhamento ao longo do eixo principal. O espaçamento entre cada par de itens adjacentes, a borda inicial principal e o primeiro item, e a borda final principal e o último item, são exatamente iguais.

O “align-content” define como os alinhamentos são distribuídos ao longo do eixo transversal do contêiner.

Valores possíveis:

align-content: [stretch/flex-start/flex-end/center/space-between/space-around];

stretch (padrão) – As linhas são distribuídas uniformemente ao longo do eixo transversal, ocupando todo o espaço disponível;

flex-start (padrão) –  As linhas são distribuídas a partir do início do eixo transversal;

flex-end – As linhas são distribuídas a partir do fim do eixo transversal;

center: As linhas são mantidas no centro do eixo transversal.

space-between – A primeira linha é deslocada para o início do eixo transversal, a última é deslocada para o final do eixo transversal e as demais são distribuídas uniformemente entre eles;

space-around – As linhas são uniformemente distribuídas ao longo do eixo transversal. Aqui, porém, são atribuídas margens iguais à esquerda e à direita (ou acima e abaixo, dependendo da direção do eixo transversal). Por isso a primeira e a última linha não ficam “coladas” nas bordas do contêiner.

O “align-items” define  o alinhamento dos itens no eixo transversal. O valor padrão dessa propriedade é o stretch com isso os elementos sempre ficaram da mesma altura seguindo o elemento maior do contêiner.

Valores possíveis dessa propriedade:

align-items: [stretch/flex-start/flex-end/center/space-between/space-around];

stretch – Os itens serão esticados para preencher toda a dimensão do eixo transversal (altura ou largura);

flex-start –  Os itens são deslocadas para o início do eixo transversal;

flex-end – Os itens são deslocadas para o final do eixo transversal;

center – Os itens são centralizados no eixo transversal;

baseline – Os itens são alinhados a partir da base da primeira linha de texto de cada um.

Por padrão todos os itens são distribuídos no contêiner de acordo com a ordem que são inseridos no HTML.

Com essa propriedade é possível alterar a ordem sem alterar a ordem diretamente no HTML.

Valores:

order: [número]

Os valores numéricos definem a ordem a ser mostrada na tela. Exemplo: Valor 2 o elemento ficará na posição 2 do contêiner. 

O “flex-grow” define o fator de crescimento flexível do contêiner, o valor padrão é “0” que indica que o elemento não deve crescer.

Valores:

flex-grow: [número]

O “flex-shrink” define o fator de redução do contêiner, ele dirá o quanto o contêiner deve reduzir. Seu valor padrão é “0” indicando que o contêiner não deve diminuir.

Valores:

flex-shrink: [número]

O “flex-shrink” define o fator de redução do contêiner, ele dirá o quanto o contêiner deve reduzir. Seu valor padrão é “0” indicando que o contêiner não deve diminuir.

Valores:

flex-shrink: [número]

O “flex-basis” define o tamanho inicial do item antes que o espaço ao seu redor seja distribuído. Ou seja dependendo da direção do eixo principal.

O valor atribuído a essa propriedade pode ser em percentual, em pixels, ou a palavra auto, que é o valor padrão (considera as dimensões do item – width e height)

Valores:

flex-basis: [número]

A propriedade CSS define como um item flexível aumentará ou diminuirá para caber no espaço disponível em seu contêiner flexível. flex É uma abreviação para flex-grow, flex-shrink, e flex-basis.

Valores: 

flex: [flex-grow] [flex-shrink] [flex-basis]

Esta propriedade permite sobrescrever no item o comportamento que foi definido pela propriedade align-items.

A sintaxe e os valores possíveis para essa propriedade são apresentados a seguir:

Valores:

align-self: [stretch/flex-start/flex-end/center/space-between/space-around];

auto – Respeita o comportamento definido no container por meio do align-items;

stretch – O item será esticado para preencher toda a dimensão do eixo transversal (alturaou largura);

flex-start – O item é deslocado para o início do eixo transversal

flex-end – O item é deslocado para o final do eixo transversal;

center – O item é centralizado no eixo transversal;

baseline – O item é alinhado a partir da base da primeira linha de texto dos demais.

Esta propriedade é uma abreviatura para as seguintes propriedades CSS:

align-content

justify-content

O primeiro valor é o valor da align-contentpropriedade, o segundo, o justify-contentúnico.

/* Alinhamento posicional */ 
/* align-content não leva os valores esquerdo e direitos */
place-content: center start;  
place-content: start center; 
place-content: end left; 
place-content: flex-start center;
place-content: flex-end center; 

/* Alinhamento da linha de base */ 
/* justify-content não leva valores de linha de base */
place-content: baseline center; 
place-content: first baseline space-evenly; 
place-content: last baseline right;

/* Alinhamento distribuído */
place-content: space-between space-evenly; 
place-content: space-around space-evenly;
place-content: space-evenly stretch; 
place-content: stretch space-evenly; 

/* Valores globais */
place-content: inherit;
place-content: initial;
place-content: unset;

Esta propriedade é uma abreviatura para as seguintes propriedades CSS:

align-items

justify-items

O primeiro valor é o valor da align-itemspropriedade, o segundo, o justify-itemsúnico.

/* Valores de palavra-chave */
place-items: auto center;
place-items: normal start;

/* Alinhamento posicional */
place-items: center normal;
place-items: start auto;
place-items: end normal;
place-items: self-start auto;
place-items: self-end normal;
place-items: flex-start auto;
place-items: flex-end normal;
place-items: left auto;
place-items: right normal;

/* Alinhamento da linha de base */
place-items: baseline normal;
place-items: first baseline auto;
place-items: last baseline normal;
place-items: stretch auto;

/* Valores globais */
place-items: inherit;
place-items: initial;
place-items: unset;

Esta propriedade é uma abreviatura para as seguintes propriedades CSS:

align-self

justify-self

O primeiro valor é o valor da align-selfpropriedade, o segundo, o justify-selfúnico.

/* Valores de palavra-chave */
place-self: auto center;
place-self: normal start;

/* Alinhamento posicional */
place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;
place-self: left auto;
place-self: right normal;

/* Alinhamento da linha de base */
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;

/* Valores globais */
place-self: inherit;
place-self: initial;
place-self: unset;