Todas las propiedades habituales de flexbox, agrupadas por dónde se aplican: el contenedor y el elemento. Cada fila empareja la propiedad con sus valores comunes y lo que hace.
Flexbox dispone los elementos en una dimensión: una fila o una columna. Pon display: flex en el padre y se convierte en el contenedor flexible; sus hijos directos se convierten en elementos flexibles. Las propiedades del contenedor controlan la distribución a lo largo del eje principal y del eje transversal; las propiedades del elemento controlan cómo crece, se encoge o se alinea un elemento individual. Elige flexbox para barras, filas y centrados unidimensionales.
Tabla de referencia · 13 entradas
CSS FlexboxExplained
13 of 13 rows
Contenedor
flex | inline-flex
Convierte el elemento en un contenedor flexible.
row | column | row-reverse | column-reverse
Establece el eje principal por el que fluyen los elementos.
flex-start | center | space-between | space-around | space-evenly
Distribuye los elementos a lo largo del eje principal.
stretch | center | flex-start | flex-end | baseline
Alinea los elementos a lo largo del eje transversal.
flex-start | center | stretch | space-between
Alinea las filas envueltas cuando hay espacio extra en el eje transversal.
nowrap | wrap | wrap-reverse
Permite que los elementos pasen a nuevas líneas en lugar de encogerse.
0.5rem | 8px 16px
Espacio entre elementos, en horizontal y en vertical.
Elemento
0 | 1 | 2
Cuánto espacio libre absorbe el elemento en relación con sus hermanos.
0 | 1
Cuánto se encoge el elemento cuando no hay espacio suficiente.
auto | 200px | 50%
El tamaño inicial antes de repartir el espacio libre.
1 | 1 0 auto | 0 0 200px
Abreviatura de grow shrink basis.
auto | center | flex-start | flex-end | stretch
Invalida el align-items del contenedor para un elemento.
0 | -1 | 2
Reordena un elemento sin cambiar el código fuente.