Maquetación en una dimensión (una fila o una columna).
flex-direction: La dirección del eje principal.
flex-wrap: Si los hijos pueden pasar a otra línea cuando no caben.
flex: Abreviada de cómo crece, encoge y su tamaño base.
Maquetación en una dimensión (una fila o una columna). Se activa con display: flex en el contenedor; sus hijos pasan a ser elementos flexibles. La alineación y gap están en el grupo «Alineación y espacios».
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. La dirección del eje principal: los hijos en fila o en columna, y en qué sentido.
Valores: row, column, row-reverse, column-reverse
Esencial. Si los hijos pueden pasar a otra línea cuando no caben.
Valores: nowrap, wrap, wrap-reverse
Abreviada de flex-direction y flex-wrap.
Valores: row wrap, column nowrap
Esencial. Abreviada de cómo crece, encoge y su tamaño base. flex: 1 reparte el espacio libre a partes iguales.
Valores: 1, 0 0 auto, 2 1 10rem, none
Cuánto crece el elemento para ocupar el espacio libre, en proporción a los demás.
Valores: 0 (por defecto), 1, 2
Cuánto encoge el elemento cuando falta espacio. Con 0 no encoge.
Valores: 1 (por defecto), 0
El tamaño de partida en el eje principal, antes de crecer o encoger.
Valores: auto, 10rem, 30%, 0
Cambia el orden visual de un elemento flexible o de rejilla. No cambia el orden de lectura ni del tabulador: úsalo con cuidado.
Valores: 0 (por defecto), -1, 1
Código del tema: .flex { display: flex; flex-direction: column; }
Maquetación en una dimensión (una fila o una columna). Se activa con display: flex en el contenedor; sus hijos pasan a ser elementos flexibles. La alineación y gap están en el grupo «Alineación y espacios».
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. La dirección del eje principal: los hijos en fila o en columna, y en qué sentido.
Valores: row, column, row-reverse, column-reverse
Esencial. Si los hijos pueden pasar a otra línea cuando no caben.
Valores: nowrap, wrap, wrap-reverse
Abreviada de flex-direction y flex-wrap.
Valores: row wrap, column nowrap
Esencial. Abreviada de cómo crece, encoge y su tamaño base. flex: 1 reparte el espacio libre a partes iguales.
Valores: 1, 0 0 auto, 2 1 10rem, none
Cuánto crece el elemento para ocupar el espacio libre, en proporción a los demás.
Valores: 0 (por defecto), 1, 2
Cuánto encoge el elemento cuando falta espacio. Con 0 no encoge.
Valores: 1 (por defecto), 0
El tamaño de partida en el eje principal, antes de crecer o encoger.
Valores: auto, 10rem, 30%, 0
Cambia el orden visual de un elemento flexible o de rejilla. No cambia el orden de lectura ni del tabulador: úsalo con cuidado.
Valores: 0 (por defecto), -1, 1