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 Flexbox?
Antes de presentarte la propiedad flex-flow de Flexbox, primero debemos entender cómo funciona este sistema.
En el sistema de disposición de elementos Flexbox hay dos tipos de propiedades disponibles: aquellas que afectan al contenedor (flex container) y aquellas que afectan a los hijos de este contenedor (flex items). Las propiedades que afectan al contenedor tienden a afectar a los elementos por herencia. Sin embargo, las propiedades de flex-items pueden sobreescribir estas reglas e implementar sus propios estilos.
Otra característica que debemos entender de Flexbox es su manera de pensar en el espacio a la hora de definir la disposición de los elementos HTML. A diferencia del sistema de posicionamiento clásico que te presentamos en nuestro post sobre el posicionamiento de elementos en CSS, Flexbox no piensa en el espacio en términos de eje y o eje x. De hecho, Flexbox piensa en el espacio en términos de un eje principal y un eje transversal. El eje principal será la forma en la que Flexbox ordenará los elementos, que puede ser en el sentido horizontal row o en el sentido vertical column. Estos dos conceptos son claves para entender la lógica detrás de todas sus propiedades.
Recuerda que siempre que quieras usar una propiedad de Flexbox en tu elemento, primero necesitas insertar la propiedad display:flex. Solo así el navegador entenderá que quieres que este elemento se sitúe teniendo como base las reglas de Flexbox.
¿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).
- 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.
¿Quieres seguir aprendiendo?
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!
