Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
flex-wrap
Define se os itens flexíveis podem descer (quebrar) para outra linha.
Valores:
nowrap Padrão. Os itens serão espremidos, mas não quebrarão a linha.
wrap Os itens quebrarão a linha, se necessário.
wrap-reverse Os itens quebrarão a linha, se necessário, em ordem reversa.
flex-flow
É um atalho para definir o flex-direction e o flex-wrap de uma só vez. Exemplo:
.flex-container {
display: flex;
flex-flow: row wrap; /* Primeiro o flex-direction, depois o flex-wrap */
}
justify-content
Define o alinhamento horizontal dos itens flexíveis.
Valores:
flex-start Padrão. Itens alinhados no começo do container.
center Itens alinhados ao centro do container.
flex-end Itens alinhados no fim do container.
space-around Alinha os elementos com espaços antes, no meio e depois dos itens.
space-between Alinha os elementos com espaços entre os itens.
align-items
Define o alinhamento vertical dos itens flexíveis.
Valores:
flex-start Alinha os itens no topo do container.
center Alinha os itens no meio do container.
flex-end Alinha os itens no parte de baixo do container.
stretch Padrão. Estica os itens para preencher o container verticalmente.
baseline Alinha os elementos tomando como base sua baseline.
align-content
Define o alinhamento das linhas dos itens (quando quebra a linha com wrap).
Valores:
space-between Alinha as linhas com espaço entre elas.
space-around Alinha as linhas com espaço antes, no meio e depois.
stretch Padrão. Estica as linhas fazendo-as preencher o espaço disponível.
center Alinha as linhas no meio do container.
flex-start Alinha os elementos no começo do container.
flex-end Alinha os elementos no final do container.
FLEX-GROW E FLEX-SHRINK
É importante saber que essas propriedades é pra quando o container não pode
quebrar de linha, que aí sim terá a necessidade de organizar o espaço. Se puder
quebrar a linha, essas propriedades não terão nenhum efeito.
flex-grow
Define o quanto um item flex irá crescer, se tiver espaço disponível.
Soma-se os valores da propriedade flex-grow e divide-se o espaço disponível por
esse número. Atribui-se uma porção do espaço disponível proporcionalmente entre
os itens flex de acordo com o valor da propriedade flex-grow.
Se um item tiver flex-grow: 1 e o outro tiver flex-grow: 2, o espaço disponível será
dividido em 3, o primeiro item ficará com 1/3 do espaço disponível e o segundo item
com 2/3.
Valores especiais:
Padrão. O elemento não crescerá, mesmo com espaço disponível.
0
Usará somente o espaço do seu conteúdo.
Se nenhum outro item tiver com flex-grow, ele ocupará todo o restante
1
do espaço disponível.
flex-shrink
Define o quanto um item flex irá encolher, se não tiver espaço disponível.
flex-basis
flex
align-self
Permite alterar o alinhamento padrão (ou aquele definido por align-itens) em itens
flex de forma individual.
Os valores disponíveis são os mesmos do align-itens:
flex-start Alinha os itens no topo do container.
center Alinha os itens no meio do container.
flex-end Alinha os itens no parte de baixo do container.
stretch Padrão. Estica os itens para preencher o container verticalmente.
baseline Alinha os elementos tomando como base sua baseline.
OBS: Saiba que float, clear e vertical-align não funcionam com itens flex.