El método de diseño de las cajas flexibles (o flexbox, en inglés) permite crear diseños más eficientes y flexibles que los que se puede crear mediante la flotación (propiedad float) o el posicionamiento (propiedad position). Este método está orientado a crear estructuras de una sola dimensión. Para crear estructuras de varias dimensiones, es recomendable usar el sistema de cuadrículas.
Los tiempos modernos exigen soluciones modernas, adaptadas a la gran variedad de dispositivos electrónicos. Por eso, las cajas flexibles se han convertido en un elemento clave para diseñadores web. Se usan creando un contenedor a través de la propiedad display y los valores flex o inline-flex.
Los elementos HTML que estén dentro del contenedor flexible se colocarán unos tras otos en dirección horizontal o vertical, y su tamaño se igualará. Una vez agotado el espacio, se ordenarán perpendicularmente a la dirección principal.
Ventajas de usar las cajas flexibles CSS:
- Diseño flexible en una dimensión
- Fácil creación de un diseño web responsive
- Fácil distribución de elementos
- Fácil alineación y espaciado de elementos
- Capacidad de reordenar elementos HTML
- Separa mejor el diseño del contenido
Conceptos básicos
Antes de empezar hay que tener claros algunos conceptos básicos sobre la estructura de las cajas flexibles o flexbox en CSS.
El contenedor flexible es el elemento padre que contiene los elementos flexibles. Por tanto, la diferencia respecto a otras estructuras de diseño en CSS es que en este caso el comportamiento se indica al elemento contenedor.
Este método de diseño trabaja con dos ejes: el eje principal y el eje transversal. El eje principal es el que indica la orientación principal del contenedor, que por defecto es horizontal. El eje transversal es perpendicular al eje principal. Por tanto, si el eje principal es horizontal, el transversal será vertical, y viceversa.
Finalmente, los ítems (elementos flexibles) son cada uno de los elementos hijos que se encuentran dentro del contenedor (el elemento padre). Los ítems se distribuyen siguiendo la dirección del eje principal, pero cuando ya no caben en esa dirección, se distribuyen en el eje transversal. Es por esta razón que las cajas flexibles se utilizan para crear estructuras de una única dirección.
Vamos a ver un ejemplo. Código CSS:
.caja-flexible {
background: teal;
display: flex;
}
.item {
background: salmon;
border: 1px solid black;
color: black;
height: 40px;
width: 40px;
}
Código HTML:
<div class="caja-flexible">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
Resultado:
12345
De no haber usado la propiedad display: flex, los cinco elementos internos estarían dispuestos en vertical, ya que los <div> son elementos de bloque. Por defecto, no hay separación entre cada uno de ellos; es por esta razón que se ha añadido un borde negro, así se pueden visualizar sus cajas.
Tipos de contenedores flexibles
Existe dos tipos de contenedores flexibles, los que son de bloque y los que son de línea. Estos dos tipos se definen mediante dos valores de la propiedad de visualización display. Se trata de los siguientes valores:
| Valor | Descripción |
|---|---|
flex | El contenedor es un elemento de bloque. |
inline-flex | El contenedor es un elemento de línea. |
Con el valor flex, el contenedor será un elemento de bloque: se ubicará en una línea nueva y ocupará todo el espacio disponible hasta el final de la línea. Se comportará como si se tratara de un elemento <div>.
En cambio, usando el valor inline-flex el contenedor flexible será un elemento de línea, por lo que ocupará el mínimo espacio horizontal. En este caso, se comportará como si se tratara de un elemento <span>.
Tanto si se usa el valor flex como si se usa el valor inline-flex, por defecto, todos los ítems se distribuirán sobre la misma línea.
Organización de ítems
CSS proporciona algunas propiedades que permiten tener un mayor control sobre el diseño de los elementos flexibles. De esta forma es posible decidir su organización dentro del contenedor padre. Con la propiedad flex-direction los ítems pueden colocarse horizontalmente, verticalmente o invertir el orden.
Con la propiedad flex-wrap también se puede ajustar los ítems que no caben en una sola fila o columna, de modo que salten a la siguiente. Se puede optar por permitir o no el desbordamiento de ítems a la línea siguiente.
Dimensionado de ítems
Más allá de la distribución, los elementos flexibles también pueden adaptarse al espacio proporcionado por el elemento contenedor. Existe algunas propiedades CSS que permiten aplicar un tamaño base seguido de un factor de crecimiento o de decrecimiento a los elementos flexibles (ítems).
Mediante las propiedades flex-basis, flex-grow y flex-shrink será posible tener un mayor control de las dimensiones de los elementos flexibles.
Separación
También se puede añadir una separación entre los diferentes elementos flexibles que estén en el contenedor. Para las cajas flexibles, las propiedades row-gap y column-gap son una mejor opción que los márgenes y los rellenos, ya que no añaden separación entre los elementos y el contenedor.
Ordenación
Los elementos flexibles se pueden disponer de forma diferente, modificando el orden en el que aparecen. Esto se consigue mediante la propiedad CSS order. Con esta propiedad se asigna un “peso” a los ítems, de forma individual.
Alineación
Los elementos flexibles de su interior (ítems) se pueden alinear respecto a su elemento padre por medio de algunas propiedades CSS. Con justify-content, justify-items se pueden alinear horizontalmente, mientras que con align-content y align-items se pueden alinear verticalmente.
También existe la posibilidad de alinear ítems de forma individual e independiente, para romper la norma de la alineación general. Esto se consigue con justify-self a nivel horizontal y align-self a nivel vertical.
