Flex
flex-directionflex-wrapflex-flowrow-gap y column-gapgap

<< Nesting Alineación items >>

Hoy en día uno de los conceptos más utilizados es flexbox. Es un sistema de elementos flexibles donde los elementos HTML se adaptan y posicionan automáticamente siendo más fácil personalizar los diseños, pero está pensado para estructuras de una sola dimensión. A día de hoy, muchos frameworks y librerías utilizan el sistema grid, donde definen una matriz y modificando los nombres de las clases de los elementos podemos darle tamaño y/o posición.

Flex, también conocido como flexbox, es un sistema de elementos “flexibles”, es decir, que los elementos que lo forman se adaptan y se posicionan automáticamente, siendo mucho más fácil personalizar los diseños de una web. El concepto de flex está pensado para trabajar en una sola dimensión.

Los elementos básicos que tenemos en el esquema de flex son los siguientes:

  • Contenedor: es el elemento padre, tendrá en su interior cada uno de los ítems. Con flex las propiedades se las establecemos al elemento padre.
  •          ◦ Eje principal: Los contenedores tendrán una orientación horizontal (por defecto)
  •          ◦ Eje secundario: Es la orientación alternativa, que será en vertical (por defecto, siendo el eje principal el horizontal).
  • Ítem: Cada uno de los hijos que tiene el contenedor en su interior.

Imaginemos que tenemos el siguiente escenario:

.container {
    display: flex;
    background: gainsboro;
    .item {
        background: green;
          color: white;
    }
}

Para indicar que el contenedor se va a comportar en modo flex usamos la propiedad display : flex (Establece un contenedor en bloque, similar a block, ocupando todo el ancho del padre) o display: inline-flex(Establece un contenedor en línea, similar a inline-block, ocupando sólo lo que ocupa el contenido).

flex-direction

Podemos modificar la orientación del eje principal utilizando la propiedad flex-direction y los valores row(valor por defecto, horizontal), row-reverse(dirección del eje principal en horizontal pero empezando a colocar los ítems por la derecha), column(dirección del eje principal en vertical), y column-reverse(dirección del eje principal en vertical pero empezando a colocar los ítems de abajo arriba). Ver ejemplo aquí.

.container {
      display: flex;
      flex-direction: row-reverse;
      background: gainsboro;
}
.item {
      background: green;
      color: white;
}

flex-wrap

Lo habitual es utilizar flex para estructuras de una única dimensión, pero tiene la propiedad flex-wrap con la que podemos modificar su comportamiento. Por defecto, si un elemento (ítem) no cabe en el contenedor los elementos que tiene el container se hacen más pequeños para así ajustarlos y que entren todos, pero con la propiedad flex-wrap lo que hacemos es decirle que si no cabe se convierta en un contenedor multilínea. Los valores que puede tener son: nowrap(valor por defecto, no se permiten múltiples líneas y por tanto se ajustan para ocupar el tamaño del contenedor), wrap(permite que se comporte como multilínea, permite que se desborden) y wrap-reverse(permite la multilínea pero en sentido contrario). Ver ejemplo aquí.

.container {
      display: flex;
      flex-wrap: wrap-reverse;
      background: gainsboro;
      width: 200px;
}
.item {
      background: green;
      color: white;
}

flex-flow

Podemos utilizar en lugar de las propiedades flex-direction y flex-wrap la propiedad flex-flow. Esta propiedad nos permite asignar las dos propiedades anteriores de un sólo golpe. flex-flow: <flex-direction> <flex-wrap>. Ver ejemplo aquí.

.container {
      display: flex;
      flex-flow: row wrap-reverse;
      background: gainsboro;
      width: 200px;
}
.item {
      background: green;
      color: white;
}

row-gap y column-gap

Si queremos que los elementos que contiene el container estén separados entre sí, tenemos las propiedades row-gap(espacio entre filas, sólo funciona con flex-direction: column) y column-gap(espacio entre columnas, sólo funciona con flex-direction: row) que harían la función de padding o margin en los elementos hijos. Sólo una de estas dos propiedades tendrá efecto cuando sea un diseño en una sola dimensión, cuando tengamos la propiedad multilínea(flex-wrap) ahí podremos usar ambas, separando los ítems por filas y columnas.

.container {
      display: flex;
      flex-flow: row wrap-reverse;
      column-gap: 10px;
      row-gap: 10px;
      background: gainsboro;
      width: 200px;
}
.item {
      background: green;
      color: white;
}

gap

Como atajo a la propiedad anterior, tenemos la propiedad gap, donde podemos indicar de una sola vez los valores para las propiedades row-gap y column-gap. Si indicamos un solo valor ese valor será aplicado a ambos ejes, en el caso de poner valores distintos (o dos valores) se aplicará el primero de ellos para el ejeX y el segundo para el ejeY.

.container {
      display: flex;
      flex-flow: row wrap-reverse;
      gap: 10px;
      background: gainsboro;
      width: 200px;
}
.item {
      background: green;
      color: white;
}
Apartados de esta sección
Alineación items
Flexibilidad a los items

<< Nesting Alineación items >>