Flexbox: en detalle

En el capítulo  de introduccíon se puede ver lo básico sobre el diseño del layout de la página mediante el modelo  flexbox,. Resumiendo mucho: se trata de definir un contenedor y distribuir en su interior los elementos hijos.

También has visto que los elementos hijos (flexbox items) se distribuyen a lo largo de una dirección: horizontal (row, en fila) o vertical (column, en columna). Se trata de una distribución unidireccional. Tenemos un eje principal y un eje secundario o transversal.

Por defecto flex distribuye los hijos del contenedor en filas, o sea, el eje principal es el eje horizontal y el eje transversal por tanto es el eje vertical. Esto es importante, las propiedades de flex van a ser relativas al eje principal.

Si no se indica otra cosa los items se reparten uniformemente sin espacios entre ellos, alineados a la izquierda y en el orden en que estén escritos en el código. Y si el ancho de pantalla no permite ver la fila entera ésta se parte y continua por debajo, hay un flujo natural de los elementos hijos.

Todo este comportamiento puede controlarse mediante las propiedades adecuadas en CSS3. Para entender como aplicar los estilos a este elemento es necesario conocer algunos términos, esta imagen te ayudará:

El eje principal es la dirección sobre la que se colocarán los items hijos del contenedor flex. Si esta dirección es horizontal, en filas (row), entonces main start y main end serían como el lado izquierdo y derecho, mientras que cross start  y cross end serían los lados superior e inferior. Por su parte main size sería el ancho (width).

Si la dirección es en columnas (column), entonces se transponen los significados: main start y main end serían los lados suerior e inferior, mientras que cross start cross end serían los márgenes izquierdo y derecho. Y main size sería una altura.

Para comenzar debemos definir un contenedor o caja flexbox donde se colocarán los items hijos, los bloques que se distribuiran ordenadamente dentro de ese contenedor. Para ello en el contenedor usamos la propiedad display dey le damos el valor flex.

Ahora sería necesario definir como se colocan los bloques hijos, en forma horizontal o en forma vertical. Para esto se usa la propiedad flex-direction

• row: los hijos se disponen en filas, el eje principal seria el horizontal.
• column: los hijos se colocan en columnas, verticalmente, Ahora el eje principal es el vertical

El sufijo reverse añadido a estos valores (row-reverse o column-reverse) invierte el sentido de los ejes principal y transversal de la caja flexbox. Los hijos se siguen situado a lo largo del eje prinjcipal, pero en orden inverso a como están en el código HTML.

¿Y que pasa si los bloques hijos no caben en el contenedor? Pues usamos la propiedad flex-wrap para indicar si debe romper o no el eje en el que está distribuyendo los hijos. Esta propiedad está detallada en otro capítulo.

En resumen

<style>
.caja-flex{
display : flex;
flex-direction: row;
flex-wrap: wrap;
}
</style>

Con esto ya tendríamos definida una clase (caja-flex) que podemos aplicar a un bloque html (<div class="caja-flex">) para que los bloques contenidos (los hijos) sean manejados según el modelo flexbox.

Las propiedades flex-direction y wrap pueden abreviarse en una sola regla flex-flow. Se le asignan los dos valores separados por un espacio o uno solo usandose para el otro el valor por defecto

<style>
.caja{
display:flex;
flex-direction:column;
flex-wrap:wrap;
}
.caja{
display:flex;
flex-flow: column wrap;
}

Ambas declaraciones CSS son equivalentes, y la forma abreviada ahorra espacio y escribir, pero no tiene más ventajas que esas.

Fíjate bien en el esquema del modelo flexbox. Los nombres te serán útiles a la hora de entender como se alinean los hijos dentro del contenedor. Ten en cuenta que esta alineación es en la dirección del eje transversal.

Si el contenedor flex (display: flex) se define para disponer sus hijos en filas (flex-direction: row) entonces la propiedad align-items alinea los hijos en el eje transversal (en vertical): dispondrá los hijos pegados a la parte superior (align-items: flex-start) en la parte inferior (align-items: flex-end) o en el centro (align-items: center).

Para verlo lo mejor es un ejemplo que puedes probar y modificar en nuestro sandbox. Cambia el valor de align-items para ver el efecto, los valores posibles son flex-start, flex-end, center y stretch (valor por defecto)

<style>
.contenedor-flex {
display:flex;
align-items: center;
border: 1px solid blue;
height:300px; }
.contenedor-flex >div {
width:75px;
padding:10px;
margin: 10px;
background-color: aqua;
}
</style>

<p>Alineando los items</p>
  <div class="contenedor-flex">
  <div>
   Hijo 1
  </div>
  <div>
   Hijo 2
  </div>
  <div>
   Hijo 3
  </div>
</div>

Este ejemplo se centra en align-items. Se trata de alinear los elementos hijos del contenedor. En el ejemplo la dirección de flex es row (por defecto) por tanto los hijos se disponen en forma horizontal y esta propiedad los alinea según el eje transversal, o sea, en vertical. Por eso al poner center vemos que los hijos quedan centrados verticalmente.

Puedes ver y experimentar con este ejemplo

Considera que los valores flex-start se coresponde con cross/main start, y flex-end con cross/main end. Dependiendo de si flex-direction es row o column. Es decir es una alineación en el eje transversal.

Resumiendo :

align-items: flex-start

En la dirección fila (flex-direction:row), alinea los items hijo en la parte superior del contenedor.
En la dirección columna flex-direction:column) los items hijo en la parte izquierda del contenedor.

align-items: flex-end

En la dirección fila (flex-direction:row), alinea los items hijo en la parte izquierda del contenedor.
En la dirección columna flex-direction:column) los items hijo en la parte derecha del contenedor.

align-items: center

En la dirección fila (flex-direction:row), centra verticalmente los items hijo.
En la dirección columna flex-direction:column) centra verticalmente los items hijo.

align-items:stretch

Este es el valor por defecto y hace que los items hijos ocupen todo el espacio posible dentro del contenedor, agrandando el item hijo en la dirección de eje transversal.

align-items: baseline

Este es un alineamiento entre items más que respecto al contenedor. Los hijos quedan alineados entre sí siguiendo la linea del texto . La baseline es la linea horizontal sobre la que se escriben todas la letras sin parte baja (a, e, m... no las p, j, g....). En modo column es similar al flex-start.

Para una definición de flex con eje principal el horizontal (flex-direction: row), estas son las posibles situaciones