Como funciona o Flexbox
Dois eixos, e tudo gira à volta deles
display: flex ativa um layout com um eixo principal e um eixo transversal. flex-direction decide para onde aponta o principal: row – ao longo da linha, column – para baixo. O eixo transversal faz sempre ângulo reto com ele. Todas as outras propriedades do contentor só dizem o que fazer ao longo de um destes eixos.
justify-content é o eixo principal
justify-content distribui os itens ao longo do eixo principal. Com row é na horizontal, com column na vertical, e é aqui que mais se confunde: "centrar" numa coluna faz-se com align-items, não com justify-content.
space-between empurra o primeiro e o último item para as margens, space-around dá a cada um espaço igual dos dois lados, por isso os intervalos exteriores parecem metade dos interiores, e space-evenly torna todos os intervalos iguais.
align-items é o eixo transversal
O valor predefinido é stretch: os itens esticam até à altura total da linha. É por isso que os cartões numa linha ficam com a mesma altura sem qualquer height: 100%. Assim que define center ou flex-start, cada item volta a ter a altura do seu conteúdo.
wrap decide se haverá uma segunda linha
nowrap é o valor predefinido do CSS e significa "uma linha a qualquer custo": os itens encolhem abaixo da sua largura. wrap permite a quebra de linha, e aí a largura do item passa a contar.
gap lê-se a partir das linhas
gap: 16px 24px significa 16 entre linhas e 24 entre itens de uma linha, por esta ordem. Se os números forem iguais, escreva um só. Nunca há intervalo nas margens exteriores do contentor.
Perguntas frequentes sobre Flexbox
Flexbox ou Grid?
Flexbox – quando os itens ficam ao longo de um eixo e repartem o espaço entre si: uma barra de botões, um cabeçalho, uma fila de etiquetas. Grid – quando o layout se descreve em duas direções ao mesmo tempo, linhas e colunas. Uma galeria de cartões do mesmo tamanho é normalmente grid, uma fila de itens de larguras diferentes é flex.
Porque é que os itens encolhem em vez de passarem para outra linha?
Porque está definido nowrap. É o valor predefinido e permite ao navegador tornar os itens mais pequenos do que a largura definida. A solução é flex-wrap: wrap e, para garantir que um item nunca encolhe, flex-shrink: 0.
Como faço itens com a mesma largura?
flex: 1 nos filhos. É a forma curta de flex-grow: 1; flex-shrink: 1; flex-basis: 0, e é o flex-basis a zero que torna as larguras iguais – com flex-basis: auto só repartem o espaço livre, não a linha inteira.
Como centro um item nos dois eixos?
justify-content: center juntamente com align-items: center. Uma propriedade centra no eixo principal, a outra no eixo transversal, por isso precisa das duas.
row-reverse muda a ordem para um leitor de ecrã?
Não. row-reverse e wrap-reverse só mudam o que se vê no ecrã; a ordem do código, do foco e da leitura mantém-se a antiga. Se os itens precisam mesmo de outra ordem, mude-os de lugar no HTML.