Sobre el autor : Rachel Andrew no solo es la editora en jefe de Smashing Magazine, sino tambi茅n una desarrolladora web, escritora y oradora. Es autora de varios libros, incluido
The New CSS Layout , uno de los desarrolladores del sistema de gesti贸n de contenido
Perch . Escribe sobre negocios y tecnolog铆a en su sitio web
rachelandrew.co.uk .
Resumen: en este art铆culo analizaremos las propiedades de alineaci贸n en Flexbox y algunas reglas b谩sicas sobre c贸mo funciona la alineaci贸n en los ejes principal y transversal.
En el
primer art铆culo de esta serie, habl茅 sobre lo que sucede cuando una propiedad
display: flex
se declara para un elemento. Ahora veamos las propiedades de alineaci贸n y c贸mo funcionan con Flexbox. Si alguna vez ha estado confundido, aplique
align
o
justify
, 隆espero que este art铆culo aclare mucho!
Historial de alineaci贸n de Flexbox
En la historia de CSS, la alineaci贸n correcta en ambos ejes parec铆a ser el mayor desaf铆o. La aparici贸n de esta funci贸n en Flexbox para muchos se ha convertido en la principal ventaja de esta tecnolog铆a. La alineaci贸n se redujo a
dos l铆neas de CSS .
Las propiedades de alineaci贸n ahora est谩n completamente definidas en
la especificaci贸n de Alineaci贸n de caja . Detalla c贸mo funciona la alineaci贸n en varios dise帽os. Esto significa que en CSS Grid puede usar las mismas propiedades que en Flexbox, y en el futuro tambi茅n en otros dise帽os. Por lo tanto, cualquier nueva caracter铆stica de alineaci贸n de Flexbox se describir谩 en detalle en la especificaci贸n de Alineaci贸n de caja, y no en la pr贸xima versi贸n de Flexbox.
Las propiedades
Es dif铆cil para muchos recordar si usar propiedades que comienzan con
justify-
o
justify-
. Es importante recordar lo siguiente:
justify-
realiza la alineaci贸n en el eje principal en la misma direcci贸n que la direcci贸n flex-direction
;- alinear: realiza la
align-
eje a trav茅s de la flex-direction
.
Realmente ayuda a pensar en t茅rminos de los ejes principal y transversal, y no horizontal y vertical. No importa c贸mo se dirige f铆sicamente el eje.
Alineaci贸n del eje principal con justify-content
Comencemos con la alineaci贸n en el eje principal. Se implementa utilizando la propiedad
justify-content
. Esta propiedad trata todos los elementos como un grupo y controla la distribuci贸n del espacio entre ellos.
El valor inicial de
justify-content
es
flex-start
. Es por eso que al declarar
display: flex
todos los elementos flex se alinean al comienzo de la l铆nea. Al escribir, de izquierda a derecha, los elementos se agrupan de izquierda a derecha.

Tenga en cuenta que la propiedad
justify-content
produce un efecto visible solo
cuando hay espacio libre . Por lo tanto, si su conjunto de elementos ocupa todo el espacio en el eje principal,
justify-content
no har谩 nada.

Si
justify-content
en
flex-end
, entonces todos los elementos se mover谩n al final de la l铆nea. El espacio libre es ahora al principio.

Hay otras cosas que puedes hacer con este espacio. Por ejemplo, distrib煤yalo entre nuestros elementos usando
justify-content: space-between
. En este caso, el primer y el 煤ltimo elemento se colocar谩n en los extremos del contenedor, y todo el espacio se dividir谩 por igual entre los elementos.

Podemos asignar espacio usando
justify-content: space-around
. En este caso, el espacio disponible se divide en partes iguales y se coloca a cada lado del elemento.

El nuevo valor de
justify-content
se puede encontrar en la especificaci贸n de Alineaci贸n de caja; no se especifica en la especificaci贸n de Flexbox. Este valor es el
space-evenly
. En este caso, los elementos se distribuyen uniformemente en el contenedor, y el espacio adicional se distribuye uniformemente entre los elementos y en ambos lados.

Puedes jugar con todos los valores en la
demostraci贸n .
Los valores funcionan exactamente de la misma manera vertical, es decir, si
flex-direction
se aplica a la
column
. Es cierto que es posible que no tenga espacio libre en la columna para distribuci贸n si no agrega la altura o el tama帽o de bloque del contenedor, como en
esta demostraci贸n .
Alineaci贸n axial con align-content
Si el contenedor tiene varios ejes y
flex-wrap: wrap
especifica
flex-wrap: wrap
, entonces puede usar
align-content
para alinear las l铆neas en el eje transversal. Pero se requiere espacio adicional. En
esta demostraci贸n, el eje transversal funciona en la direcci贸n de la columna, e indiqu茅 que la altura del contenedor es de
60vh
. Como esto es m谩s que necesario para mostrar todos los elementos, aparece el espacio libre vertical.
Entonces puedo aplicar
align-content
con cualquiera de los valores .
Si la
column
especifica como
flex-direction
, entonces
align-content
funciona como en el
siguiente ejemplo .
Al igual que con
justify-content
, trabajamos con un grupo de cadenas y asignamos espacio libre.
Propiedad por place-content
En la especificaci贸n de Alineaci贸n de cuadro, puede encontrar la propiedad de
place-content
. El uso de esta propiedad significa que est谩 configurando
justify-content
y
align-content
al mismo tiempo. El primer valor es para
align-content
, el segundo para
justify-content
. Si solo se especifica un valor, se aplica a ambas propiedades:
.container { place-content: space-between stretch; }
Corresponde a esto:
.container { align-content: space-between; justify-content: stretch; }
Y tal c贸digo:
.container { place-content: space-between; }
Equivalente a lo siguiente:
.container { align-content: space-between; justify-content: space-between; }
Alineaci贸n axial con elementos de align-items
Ahora sabemos que puede alinear un conjunto de elementos o filas como un grupo. Sin embargo, hay otra forma de alinear los elementos entre s铆 en el eje transversal. El contenedor tiene una altura, que est谩 determinada por la altura del elemento m谩s alto.

Alternativamente, se puede definir por la propiedad de
height
en el contenedor:

Por qu茅 los elementos se estiran al tama帽o del elemento m谩s alto: esto se debe a que el valor inicial para el par谩metro de
align-items
es
stretch
. Los elementos se estiran a lo largo del eje transversal hasta el tama帽o del contenedor en esta direcci贸n.
Tenga en cuenta que en un contenedor de varias l铆neas, cada l铆nea act煤a como un nuevo contenedor. El elemento m谩s alto en esta fila determinar谩 el tama帽o de todos los elementos en esta fila.
Adem谩s del valor de
stretch
inicial, puede establecer elementos de
align-items
para
flex-start
, en cuyo caso est谩n alineados al comienzo del contenedor y ya no est谩n estirados en altura.

El valor del
flex-end
mueve al final del contenedor a lo largo del eje transversal.

Si utiliza el valor
center
, los elementos se centran entre s铆:

Tambi茅n podemos alinearlos con la l铆nea base. Esto garantiza que el texto est茅 alineado sobre una base, en contraste con la alineaci贸n de los campos alrededor del texto.

Todas estas opciones se pueden probar en la
demostraci贸n .
Alineaci贸n individual con align-self
La propiedad
align-items
establece la alineaci贸n de todos los elementos al mismo tiempo. De hecho, establece valores de autoalineaci贸n para todos los elementos del grupo. Tambi茅n puede usar la propiedad
align-self
para cualquier elemento individual para alinearlo dentro de la cadena y con respecto a otros elementos.
El
siguiente ejemplo utiliza elementos de
align-items
en el contenedor para centrar todo el grupo, pero tambi茅n se
align-self
para el primer y 煤ltimo elemento.

驴Por qu茅 no justify-self
?
A menudo surge la pregunta de por qu茅 es imposible alinear un elemento o grupo de elementos a lo largo del eje principal. 驴Por qu茅 no hay una propiedad propia en
-self
para la alineaci贸n en el eje principal? Si introduce
justify-content
y
align-content
como una forma de asignar espacio, la respuesta se vuelve m谩s obvia. Tratamos los elementos como un grupo y colocamos el espacio libre de una determinada manera: ya sea al principio o al final del grupo, o entre elementos.
Tambi茅n puede ser 煤til pensar c贸mo funcionan
justify-content
y
align-content
en CSS Grid Layout. En la cuadr铆cula, estas propiedades se utilizan para distribuir espacio libre en un contenedor de
cuadr铆cula entre pistas de cuadr铆cula . Aqu铆 tambi茅n tomamos un grupo de pistas, y con la ayuda de estas propiedades distribuimos espacio libre entre ellas. Como operamos en un grupo en Grid y Flexbox, no podemos tomar un elemento separado y hacer algo m谩s con 茅l. Sin embargo, hay una manera de obtener el dise帽o de dise帽o que los codificadores desean cuando hablan de la propiedad
self
en el eje principal. Este es el uso de campos autom谩ticos.
Usando campos autom谩ticos en el eje principal
Si alguna vez centr贸 un bloque en CSS (por ejemplo, ajustando el contenido de la p谩gina principal, configurando los campos a la izquierda y a la derecha en
auto
), entonces ya tiene algo de experiencia con los campos autom谩ticos. El valor
auto
para los campos llena el espacio m谩ximo en la direcci贸n establecida. Para centrar el bloque, configuramos los campos izquierdo y derecho en
auto
: cada uno de ellos intenta ocupar la mayor cantidad de espacio posible y, por lo tanto, coloca nuestro bloque en el centro.
Los campos autom谩ticos funcionan muy bien en Flexbox para alinear elementos individuales o grupos de elementos en el eje principal. El
siguiente ejemplo muestra un caso t铆pico. Hay una barra de navegaci贸n, los elementos se muestran como una cadena y usan el valor inicial
justify-content: start
. Quiero que el 煤ltimo elemento se muestre por separado de los dem谩s al final de la l铆nea, siempre que la l铆nea tenga suficiente espacio para esto.
Tomamos este elemento y establecemos la propiedad
margin-left
en
auto
. Esto significa que el campo est谩 tratando de obtener la mayor cantidad de espacio posible a la izquierda del elemento, es decir, el elemento se empuja hacia el borde derecho.

Si usa campos autom谩ticos en el eje principal,
justify-content
dejar谩 de funcionar, ya que los campos autom谩ticos ocupar谩n todo el espacio que de otro modo se asignar铆a usando
justify-content
.
Alineaci贸n de repuesto
Para cada m茅todo de alineaci贸n, se describe un retroceso: qu茅 sucede si la alineaci贸n dada no es posible. Por ejemplo, si solo tiene un elemento en el contenedor y especifica
justify-content: space-between
, 驴qu茅 deber铆a suceder? En este caso, se aplica una alineaci贸n de
flex-start
adicional: un elemento se alinear谩 al comienzo del contenedor. En el caso de
justify-content: space-around
, se usa una alineaci贸n de
center
libre.
En la especificaci贸n actual, no puede cambiar la alineaci贸n de repuesto. Hay una
nota en las especificaciones , que permite la posibilidad de especificar una reserva arbitraria en futuras versiones.
Alineaci贸n segura e insegura
Una adici贸n reciente a la especificaci贸n de Alineaci贸n de caja es el concepto de alineaci贸n segura e insegura utilizando las palabras clave
seguras e
inseguras .
En el siguiente c贸digo, el 煤ltimo elemento es demasiado ancho para el contenedor, y con una alineaci贸n insegura y un contenedor flexible en el lado izquierdo de la p谩gina, el elemento se corta porque el desbordamiento va m谩s all谩 de los bordes de la p谩gina.
.container { display: flex; flex-direction: column; width: 100px; align-items: unsafe center; } .item:last-child { width: 200px; }

La alineaci贸n segura evita la p茅rdida de datos al mover el desbordamiento al otro lado.
.container { display: flex; flex-direction: column; width: 100px; align-items: safe center; } .item:last-child { width: 200px; }

Estas palabras clave a煤n no son compatibles con todos los navegadores, pero demuestran c贸mo las especificaciones de Box Alignment agregan control a Flexbox.
Conclusi贸n
Las propiedades de alineaci贸n comenzaron con una lista en Flexbox, pero ahora tienen sus propias especificaciones y se aplican a otros contextos de dise帽o. Aqu铆 hay algunos datos clave para ayudar a recordar su uso en Flexbox:
justify-
para los ejes principales y align-
para el transversal;align-content
y justify-content
requieren espacio libre;- Las propiedades de
align-content
y justify-content
se aplican a los elementos del grupo, distribuyendo el espacio entre ellos. No puede especificar la alineaci贸n de un elemento individual porque falta la propiedad -self
; - si desea alinear un elemento o dividir un grupo a lo largo del eje principal, use campos autom谩ticos;
align-items
establece las mismas propiedades de align-self
para todo el grupo. Use align-self
para el hijo del grupo para establecer su valor individualmente.