Flexbox

/* Container flex */
.container {
  display: flex;
  justify-content: center;  /* Alinha horizontal */
  align-items: center;      /* Alinha vertical */
  gap: 16px;                /* Espaço entre itens */
}

/* Direções */
.horizontal { flex-direction: row; }    /* Padrão */
.vertical { flex-direction: column; }

/* Distribuição */
.espaco-entre { justify-content: space-between; }
.espaco-igual { justify-content: space-evenly; }

/* Flex nos filhos */
.item {
  flex: 1;           /* Cresce igualmente */
}
.item-fixo {
  flex: 0 0 200px;   /* Largura fixa de 200px */
}

/* Wrap (quebra de linha) */
.grid-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.grid-flex .card {
  flex: 1 1 300px;   /* Mínimo 300px, cresce */
}