Flexbox Generator

flex-direction

flex-wrap

justify-content

align-items

align-content

row-gap: 12column-gap: 12

flex-growflex-shrinkflex-basisorderTexto

align-self

Ancho 100%Alto 260px Mostrar ejes

Eje principal → (justify-content)Eje transversal ↓ (align-items)

El eje principal es horizontal; el eje transversal es vertical.
El espacio libre se reparte entre elementos; el primero y el último tocan los bordes.
En el eje transversal se centran.
Todo va en una sola línea: si no cabe, los elementos encogen según su flex-shrink.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.item-2 {
  flex: 1 1 auto;
}

Notas

Solo se generan las propiedades que cambian respecto al valor por defecto.
flex se escribe siempre con sus tres valores (grow shrink basis) para evitar la trampa de flex: 1, que fija flex-basis a 0 %.
Las clases de Tailwind son de la versión 4 y se han comprobado equivalentes al CSS generado.
order solo cambia el orden visual: lectores de pantalla y teclado siguen el orden del HTML.