CSS
Fundamentos de Flexbox para distribuir elementos en un eje, controlar dirección, wrapping, orden y alineación dentro de un contenedor flexible.
Flexbox distribuye items directos principalmente a lo largo de un eje.
.toolbar {
display: flex;
gap: 0.75rem;
}<div class="toolbar">
<button>Editar</button>
<button>Eliminar</button>
</div>Solo los hijos directos se convierten en flex items. Sus descendientes continúan usando su propio layout.
.toolbar {
flex-direction: row;
}flex-direction.En row, main suele coincidir con inline axis; con column coincide con block axis.
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;Los valores reverse cambian presentación, no orden DOM ni lectura. Evítalos para corregir markup desordenado.
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}Sin wrap, todos los items intentan permanecer en una línea y pueden encogerse.
.toolbar {
justify-content: space-between;
}Distribuye espacio libre en main axis. No tiene efecto visible si no existe espacio libre.
Valores comunes:
startendcenterspace-betweenspace-aroundspace-evenly.toolbar {
align-items: center;
}Alinea items en cross axis. stretch suele ser el default cuando el tamaño cross es auto.
.tags {
flex-wrap: wrap;
align-content: start;
}Distribuye líneas flex, no items individuales. Necesita múltiples líneas y espacio cross sobrante.
.toolbar {
gap: 0.5rem 1rem;
}Controla separación entre items/lines sin margins laterales especiales.
.toolbar__account {
margin-inline-start: auto;
}Absorbe espacio libre y empuja el item al extremo.
.item { order: 2; }Cambia orden visual, pero no necesariamente lectura, foco o DOM. Úsalo para variaciones pequeñas, no para reconstruir la jerarquía.
.flex-item {
min-inline-size: 0;
}Un item puede negarse a encoger por su min-content size. Este reset local permite truncar o envolver contenido cuando corresponde.
.project-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
}¿Por qué justify-content: space-between puede parecer que no funciona?
Porque solo distribuye espacio libre; si los items ya consumen todo el main size, no queda espacio que repartir.
Flex sizing y alineación explica grow, shrink y basis.