Flexbox es un sistema de disposición de elementos para CSS3 que nos permite situar los elementos de nuestra página web de una manera más cómoda y flexible que otros métodos tradicionales. Al ser un sistema muy completo, Flexbox tiene varias propiedades por conocer. En este post, te presentamos la propiedad flex-flow de Flexbox, una propiedad que combina el poder de otras dos de sus propiedades principales.
¿Cómo funciona la propiedad flex-flow de Flexbox?
La propiedad flex-flow de Flexbox funciona como una abreviatura para unir las propiedades flex-direction y flex-wrap. Básicamente, esta propiedad agrupa lo que hace la propiedad flex-direction con lo que hace flex-wrap en una sola etiqueta.
Para revisar tus conocimientos sobre estas dos propiedades, te recomendamos leer nuestros posts sobre la propiedad flex-direction y la propiedad flex-wrap.
- Flex-direction determina la dirección en que se ordenarán los elementos en el espacio. Esto puede ser de izquierda a derecha (row), de derecha a izquierda (row-reverse), de arriba a abajo (column) o de abajo a arriba (column-reverse) ( flex-flow flex-direction ).
- Por su parte, flex-wrap determina cómo se comportarán los elementos hijos de un contenedor cuando no caben en el ancho de la página web. Con flex-wrap: nowrap, los elementos ignorarán su tamaño para poder ajustarse al ancho. Con flex-wrap: wrap, los elementos continuarán en la siguiente línea del eje transversal. De este modo, el comportamiento de los elementos con flex-wrap depende directamente del eje principal elegido en flex-direction.
Lo que hace la propiedad flex-flow de Flexbox es unir estas opciones en una sola propiedad. Así que, en vez de escribir las dos propiedades anteriores, podemos simplemente escribir, por ejemplo, flex-flow: row wrap. De este modo, puedes crear cualquier clase de combinaciones y tener el mismo efecto que al escribir las dos propiedades.
Ahora que sabes cómo funciona la propiedad flex-flow de Flexbox, ¡es hora de que empieces a usar este sistema de disposición de elementos! Por ello, te invitamos a nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp. Allí, entre muchas otras cosas, continuarás aprendiendo sobre todas las posibilidades que CSS puede ofrecerte. Al final, serás capaz de diseñar tu propia página web. ¡No te pierdas esta oportunidad de seguir aprendiendo e inscríbete ya!
