Como se ilustra en la pregunta, en las cajas flexibles tenemos dos ejes, el principal (main axis) y el transversal (cross axis).
Para alinear los elementos flexibles en el eje principal tenemos la propiedad:
Para alinear los elementos flexibles en el eje transversal tenemos tres propiedades:
Comencemos con la pregunta que dice así:
¿Qué sucede cuando cambio la dirección del contenedor flexible utilizando la propiedad flex-direction
?
Primero que nada es importante tener claro que las cajas flexibles o flexbox
tiene como propósito el diseño (layout) en una sola dimensión.
¿Qué quiere decir esto?
La dirección del contenedor flexible puede ser de fila o de columna, no ambas al mismo tiempo.
La propiedad flex-direction
acepta cuatro valores:
Cuando flex-direction
tiene como valor row
o row-reverse
el eje principal es el horizontal y el eje transversal es el vertical.
Mientras que cuando flex-direction
tiene como valor column
o column-reverse
el eje principal es el vertical y el eje transversal es el horizontal.
Esto se debe a que:
El eje transversal es un eje corporal perpendicular a la dimensión
mayor de un cuerpo o bien a la dirección habitual de movimiento.
En resumen y volviendo a la pregunta:
¿Qué sucede cuando cambio la dirección del contenedor flexible utilizando la propiedad flex-direction
?
Se invierte el eje principal y el eje transversal si se cambia la dirección de fila a columna, o viceversa.
Pensémoslo así:
Teniendo un poco más claro esto, volvamos a redactar las preguntas que dicen así:
¿Cómo es posible alinear los elementos flexibles en el eje horizontal?
¿Cómo es posible alinear los elementos flexibles en el eje vertical?
Ya sabemos que la dirección afecta los ejes del contenedor flexible y los métodos de alineación se invierten, entonces las preguntas adecuadas son:
- ¿Cómo es posible alinear los elementos flexibles en el eje principal?
- ¿Cómo es posible alinear los elementos flexibles en el eje
transversal?
Métodos para alinear en el eje principal:
Según la W3C hay dos métodos para alinear los elementos flexibles en el eje principal:
- La propiedad
justify-content
auto
márgenes
justify-content
La propiedad justify-content
alinea los elementos flexibles del contenedor flexible en el eje principal.
Esta propiedad se define en el contenedor flexible pero solamente afecta a los elementos flexibles.
Existen cinco alineaciones que acepta esta propiedad:
- flex-start - Los elementos flexibles se agrupan al inicio del contenedor flexible.
Sintaxis: justify-content: flex-start;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: flex-start; /* Valor inicial */
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
- flex-end - Los elementos flexibles se agrupan al final del contenedor flexible.
Sintaxis: justify-content: flex-end;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: flex-end;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
- center - Los elementos flexibles se agrupo al centro del contenedor flexible.
Sintaxis: justify-content: center;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: center;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
- space-around - Los elementos flexibles se distribuyen uniformemente en el contenedor flexible.
Sintaxis: justify-content: space-around;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: space-around;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
- space-between - Los elementos flexibles se distribuyen uniformemente en el contenedor flexible. A diferencia de
space-around
, el primer elemento flexible se alinea a un extremo y el último elemento flexible al extremo opuesto.
Sintaxis: justify-content: space-between;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: space-between;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
En resumen:
Auto Márgenes
A diferencia de la propiedad justify-content
, los auto márgenes se definen en los elementos flexibles en lugar del contenedor flexible.
Con ellos podemos lograr alineaciones que de algún modo sustituyen la inexistencia de propiedades como justify-self
y justify-items
.
Aquí podemos cubrir la pregunta:
¿Cómo es posible alinear solamente un elemento a la izquierda y los demás a la derecha si no existe la propiedad justify-self
o
justify-items
en el eje principal?
Para esto esperaríamos que existiera justify-self: flex-start;
y utilizarlo en el primer elemento, mientras que en el resto aplicaría `justify-content: flex-end;
Lamentablemente la propiedad justify-self
no existe, pero hay una teoría de Michael_B, un gran contribuyente en StackOverflow en Inglés de las cajas flexibles (y de quien está basada esta respuesta, referencia aquí), de que para esto están los auto márgenes.
.flex-item:first-child { margin-right: auto; }
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: flex-end;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 10%;
background-color: gold;
}
.flex-item:first-child {
margin-right: auto;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
O también:
.flex-item:nth-child(2) { margin-left: auto; }
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: flex-end;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 10%;
background-color: gold;
}
.flex-item:nth-child(2) {
margin-left: auto;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
Cambiemos la dirección a columna y apliquemos un margen inferior con valor auto.
jsFiddle
Este caso y muchos otros se pueden lograr con los auto márgenes.
Métodos para alinear en el eje transversal:
align-content
La propiedad align-content
alinea los elementos similar a justify-content
pero en el eje transversal.
Esta propiedad también se define en el contenedor flexible pero únicamente afecta a los elementos flexibles. Se requiere que exista más de una línea de elementos flexibles para que su efecto sea visible.
Existen 6 alineaciones que acepta esta propiedad. Todos los valores se comportan igual solo que en el eje transversal. El único valor adicional es stretch
.
Sintaxis: align-content: flex-start;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
align-content: flex-start;
flex-wrap: wrap;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 25%;
background-color: gold;
border: .4em solid peachpuff;
box-sizing: border-box;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
Sintaxis: align-content: flex-end;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
align-content: flex-end;
flex-wrap: wrap;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 25%;
background-color: gold;
border: .4em solid peachpuff;
box-sizing: border-box;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
Sintaxis: align-content: center;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
align-content: center;
flex-wrap: wrap;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 25%;
background-color: gold;
border: .4em solid peachpuff;
box-sizing: border-box;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
Sintaxis: align-content: space-between;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
align-content: space-between;
flex-wrap: wrap;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 25%;
background-color: gold;
border: .4em solid peachpuff;
box-sizing: border-box;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
Sintaxis: align-content: space-around;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
align-content: space-around;
flex-wrap: wrap;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 25%;
background-color: gold;
border: .4em solid peachpuff;
box-sizing: border-box;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
Sintaxis: align-content: stretch;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
align-content: stretch;
flex-wrap: wrap;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 25%;
background-color: gold;
border: .4em solid peachpuff;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
align-items y align-self
La propiedad align-items
alinea todos los elementos flexibles del contenedor flexible en el eje transversal.
Esta propiedad se define en el contenedor flexible pero solamente afecta a los elementos flexibles.
La propiedad align-self
es muy similar a align-items
a diferencia que esta alinea un solo elemento flexible del contenedor flexible en el eje transversal.
IMPORTANTE: Esta propiedad es diferente a las demás ya que se define en el elemento flexible y no en el contenedor flexible.
Existen cinco alineaciones que aceptan estas propiedades (en los demos se utilizará align-items
por motivos de brevedad):
Sintaxis: align-items: flex-start;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 25%;
background-color: gold;
border: .4em solid peachpuff;
box-sizing: border-box;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
Sintaxis: align-items: flex-end;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
align-items: flex-end;
flex-wrap: wrap;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 25%;
background-color: gold;
border: .4em solid peachpuff;
box-sizing: border-box;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
Sintaxis: align-items: center;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 25%;
background-color: gold;
border: .4em solid peachpuff;
box-sizing: border-box;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
Sintaxis: align-items: baseline;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
align-items: baseline;
flex-wrap: wrap;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 25%;
background-color: gold;
border: .4em solid peachpuff;
box-sizing: border-box;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 5em;
}
.flex-item:nth-child(even)::after {
font-size: 8em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
Sintaxis: align-items: stretch;
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 25%;
background-color: gold;
border: .4em solid peachpuff;
box-sizing: border-box;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>