Flexbox: alineación transversal
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 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
Las alineaciones vertical y horizontal (espaciado) se puede abreviar con una sola propiedad place-content. Esta propiedad acepta dos valores, el primero para alineación vertical (align-content) y otro para la alineación o espaciado horizontal (justify-content)