El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Este artículo hace un repaso de las principales características de flexbox, las que exploraremos con mayor detalle en el resto de estas guías.
Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del Grid Layout de CSS, el cual controla columnas y filas a la vez.
Lo que hacemos en el primer ejemplo es crear el contenedor principal al cual se le aplican las propiedades que se observan en las capturas al igual que las de los elementos hijos.
Con las propiedades y atributos "flex-flow: row wrap;" se logra que los hijos se alineen en fila (row) y que al ya no haber espacio los elementos restantes se vayan a la siguiente fila (wrap).
Con la propiedad y atributo "align-content: space-around;" se logra que exista un espaciado en el exterior de los elementos hijos.
Ejemplo 1
1
2
3
4
5
6
código:
HTML:
CSS:
Lo que hacemos en el segundo ejemplo es crear el contenedor principal al cual se le aplican las propiedades que se observan en las capturas al igual que las de los elementos hijos.
Con las propiedades y atributos "flex-flow: column-reverse;" se logra que los hijos se alineen en columna inversa (column-reverse).
Con la propiedad y atributo "align-content: space-between;" se logra que exista un espaciado en el interior de los elementos hijos.
