Listado completo de tutoriales

64 - Flexbox - (flex-wrap aplicada al contenedor)


La propiedad "flex-wrap" puede almacenar alguno de estos tres valores:


El valor por defecto que almacena la propiedad "flex-wrap" es "nowrap". Esto hace que todos los items se ubiquen siempre en el eje principal y en una misma línea independientemente a la cantidad de items que dispongamos.

Podemos hacer que el contenedor muestre items en varias líneas cuando no entran en una fila disponiendo en la propiedad "flex-wrap" el valor "wrap".

Como vemos en el ejemplo superior tenemos 7 cajas y las mismas si bien tienen un ancho de 100 píxeles, Flexbox se encarga de darles otro ancho para que sigan entrando en la misma fila debido a que la propiedad "flex-wrap" almacena "nowrap".

Probemos de modificar la propiedad "flex-wrap" con el valor "wrap" y podremos comprobar que cuando no entran más items en una línea continúan en la siguiente.


Retornar