centralizar elemento flexbox CSS
Antes do Flexbox, centralizar verticalmente em CSS exigia truques frágeis (`position: absolute` com `transform: translate(-50%, -50%)`, tabelas, ou `line-height` igual à altura do container). Com Flexbox, duas linhas resolvem: `display: flex; justify-content: center; align-items: center;` centraliza qualquer conteúdo nos dois eixos, sem saber a largura ou altura de antemão.
Funciona mesmo sem saber o tamanho do elemento filho, o clássico caso de uso de overlay/modal.
align-items centraliza o alinhamento vertical entre ícone e texto de alturas diferentes, gap substitui margin manual entre eles.
place-items: center é atalho de align-items + justify-items, só existe em display: grid, e sofre a mesma falha de align-items sem espaço livre: sem altura definida no container, não centraliza na vertical.
justify-content alinha os itens ao longo do eixo principal (definido por flex-direction), align-items alinha ao longo do eixo cruzado, perpendicular ao principal. Em `flex-direction: row`, justify-content controla o alinhamento horizontal e align-items o vertical, em `column` os dois se invertem.
A causa mais comum é o container flex não ter altura definida, sem uma altura (ou min-height: 100vh, por exemplo), align-items não tem espaço vertical extra para distribuir e o elemento fica "centralizado" numa área do tamanho do próprio conteúdo.
place-items é um atalho do CSS Grid, não do Flexbox, ele não existe como propriedade de container flex. Em Flexbox, sempre são duas propriedades separadas (justify-content para o eixo principal, align-items para o cruzado).
Sim, para casos específicos. `margin: auto` num item flex absorve todo o espaço livre disponível naquela direção, útil para empurrar um único item para a direita (ex.: um botão de logout no fim de uma navbar) sem precisar de justify-content: space-between.
Clique em um item para editá-lo, arraste para reordenar (altera o order de cada item).
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 16px;
}O CSS é gerado localmente no navegador.