Aligning Items in a Flex Container
Una de las razones por las que flexbox atrajo rápidamente el interés de los desarrolladores web es que por primera vez en la web se ha conseguido unas posibilidades completas de alineamiento de elementos. Se habilita la alineación vertical, de modo que por fin existe una manera rápida y facil de centrar una caja. A lo largo de esta guía, vamos a desarrollar un exhaustivo recorrido sobre el funcionamiento de las propiedades de alineamiento y justificación en Flexbox.
Para centrar nuestra caja, usamos la propiedad align-items para alinear nuestro artículo en el eje transversal, que en este caso es el eje del bloque que se ejecuta verticalmente. Utilizamos justify-content para alinear el elemento en el eje principal, que en este caso el eje en línea se ejecuta horizontalmente.
Puedes echar un vistazo al código de este ejemplo a continuación. Cambia el tamaño del contenedor o elemento anidado y el elemento anidado siempre permanece centrado.
Propiedades que controlan la alineación
Las propiedades que veremos en esta guía son las siguientes.
justify-content— controla la alineación de todos los elementos en el eje principal.align-items— controla la alineación de todos los elementos en el eje transversal.align-self— controla la alineación de un elemento flexible individual en el eje transversal.align-content— descrito en la especificación como para "empaquetar líneas flexibles"; Controla el espacio entre las líneas de flexión en el eje transversal.
También descubriremos cómo se pueden usar los márgenes automáticos para la alineación en flexbox
Nota: Las propiedades de alineación en Flexbox se han colocado en su propia especificación — CSS Box Alignment Level 3. Se espera que esta especificación finalmente reemplace las propiedades tal como se definen en Flexbox Nivel Uno.
El eje transversal
Las propiedades align-items y align-self controlan la alineación de nuestros elementos flexibles en el eje transversal, en filas si flex-direction se encuentra en row ó en columnas si flex-direction se encuentra en column.
Estamos haciendo uso de la alineación del eje transversal en el ejemplo de flexión más simple. Si agregamos display: flex a un contenedor, todos los elementos secundarios se convierten en elementos flexibles organizados en una fila. Todos se estirarán para ser tan altos como el elemento más alto, ya que ese elemento define la altura de los elementos en el eje transversal. Si su contenedor flexible tiene una altura establecida, entonces los elementos se extenderán a esa altura, independientemente de la cantidad de contenido en el elemento.
La razón por la que los elementos se convierten en la misma altura es que el valor inicial de align-items, la propiedad que controla la alineación en el eje transversal, se establece en stretch.
Podemos usar otros valores para controlar como se alinean los items:
align-items: flex-startalign-items: flex-endalign-items: centeralign-items: stretchalign-items: baseline
En el ejemplo en vivo a continuación, el valor de align-items is stretch. Pruebe los otros valores y vea cómo todos los elementos se alinean entre sí en el contenedor flexible.
Alineando un item individual con align-self
La propiedad align-items establece la propiedad align-self en todos los elementos flexibles como un grupo. Esto significa que puede declarar explícitamente la propiedad align-self para apuntar a un solo elemento. La propiedad align-self acepta todos los mismos valores que align-items, además del valor auto, que restablecerá el valor a lo que esté definido en el contenedor flex o flexible..
En este siguiente ejemplo en vivo, el contenedor flex tiene el elemento de alineación: flex-start, lo que significa que todos los elementos están alineados con el inicio del eje transversal. En este caso se dirige al primer elemento utilizando un selector first-child, y se configuró con la propiedad: strecth; otro elemento ha sido alineado, utilizando su clase selected y dando valor a la propiedad align-self: center. Puede cambiar el valor de align-items o cambiar los valores de align-self en los elementos individuales para ver cómo funciona esto.
Cambiando el eje principal
Hasta ahora hemos examinado el comportamiento cuando nuestra flex-direction es row, y mientras trabajamos en un lenguaje escrito de arriba a abajo. Esto significa que el eje principal corre a lo largo de la fila horizontalmente, y nuestra alineación del eje transversal mueve los elementos hacia arriba y hacia abajo.
Si cambiamos nuestra flex-direction a columna, align-items y align-self van a alinear los items a la derecha y a la izquierda.
Puede probarlo con el siguiente ejemplo, que tiene un contenedor flexible, con flex-direction: column, y que de lo contrario seria exactamente igual al ejemplo anterior. .
Alineando el contenido en el eje transversal: la propiedad align-content
Hasta ahora hemos estado alineando los elementos, o un elemento individual dentro del área definida por el contenedor flexible. Si tiene un contenedor flexible de varias líneas envuelto, también puede usar la propiedad align-content para controlar la distribucion del espacio entre las filas. En la especificación, esto se describe como empaquetamiento de lineas flexibles.
Para que align-content funcione necesita una mayor altura en su contenedor flexible que la que requiere para mostrar los items. A partir de ahi el tratara a todos los items como un conjunto, para determinar que sucede con ese espacio libre y y la alineacion de todo el conjunto de elementos que contiene.
La propiedad align-content acepta los siguientes valores:
align-content: flex-startalign-content: flex-endalign-content: centeralign-content: space-betweenalign-content: space-aroundalign-content: stretchalign-content: space-evenly(not defined in the Flexbox specification)
En el ejemplo en vivo siguiente, el contenedor flexible, tiene una altura de 400 pixels, lo cual es mas de lo que necesita para mostrar nuestros items. El valor de align-content lo que significa que el espacio disponible es compartido entre las lineas flexibles que estan colocadas al ras al inicio y al final del contenedor en el eje transversal.
Pruebe con otros valores para ver como la propiedad align-content funciona.
Una vez mas podemos cambiar nuestra flex-direction a column para ver como esta propieda se comporta cuando trabajamos con columnas. Al igual que antes necesitamos suficiente espacio en el eje transversal para dejar algun espacio libre despues de mostrar todos los items
Nota:
El valor space-evenly no está definido en las especificaciones de flexbox y la ultima adiccion a las especificaciones de Alineacion de cajas Box Alignment . El soporte del navegador para este valor no es tan bueno como el de los valores definidos en la especificación de flexbox.
Revise la documentacion para justify-content en MDN para encontrar más detalles de todos sus valores y el soporte de los navegadores.
Alineando contenido en el eje principal
Ahora que hemos visto como funciona la alineacion en el eje transversal, podemos echar una mirada al eje principal. Aquí solo tendremos una propiedad disponible disponible — justify-content. Esto se debe a que solo podemos trabajar con los items como grupos en el eje principal. Con justify-content controlamos que sucede con el espacion disponible, en caso de que haya más espacio del que se necesita para mostrar los items
En nuestro ejemplo inicial con display: flex en el contenedor, los items se muestran como una fila y todos se alinean al inicio del contenedor. Esto se debe a que el valor inicial de justify-content es flex-start. Cualquier espacio disponible se coloca al final de los elementos.
La propiedad justify-content accepta el mismo valor que align-content.
justify-content: flex-startjustify-content: flex-endjustify-content: centerjustify-content: space-betweenjustify-content: space-aroundjustify-content: stretchjustify-content: space-evenly(not defined in the Flexbox specification)
En el ejemplo a continuacion el valor de justify-content es space-between. El espacio disponible despues de mostrar los items es distribuido entre estos. El elemento izquierdo y derecho se alinea al ras con el inicio y el final.
Si el eje principal esta en direccion bloque porque flex-direction tiene valor column, entonces justify-content distribuira el espacio entre items, en la misma medida que el posee el espacio en el contenedor flex para ser distribuida, o sea siempre que haya espacio en el contenedor para distribuir.
Modos de Alineación y escritura
Recuerda que con todos estos metodos de alineación los valores de flex-start y flex-end son escritos en modo consciente. Si el valor de justify-content es start y el modo de escritura es izquierda a derecha, como en español o ingles, los elementos se alinearán comenzando en el lado izquierdo del contenedor
Sin embargo si el modo de escritura es de derecha a izquierda como en arabe, los elementos o items se alinearán en el extremo derecho del contenedor.
El ejemplo siguiente tiene la propiedad direction con valor rtl para forzar a los elementos a colocarse de derecha a izquierda. Puedes eliminarlo o cambiar los valores de justify-content para ver como flexbox se comporta cuando el inicio de la direccion dentro de la linea, es a la derecha.
Alineacíon y flex-direction
La linea de inicio también cambiará si cambias la propiedad flex-direction — por ejemplo usando row-reverse en vez de row.
En el ejemplo siguiente tengo items dispuestos con flex-direction: row-reverse y justify-content: flex-end. En lenguaje de izquierda a derecha, estos elementos se alinearan a la izquierda. Prueba a cambiar flex-direction: row-reverse a flex-direction: row. Veras como los elementos ahora se mueven a la derecha.
Considerando que esto puede ser algo confuso, la regla a tener en cuenta es que a no ser que hagas algo para cambiarlo, los items flexible se alinean en la misma direccion que las palabras se ordenan linealmente en el lenguaje de tu documento a lo largo de la linea. flex-start comenzará donde el inicio de la oracion debe comenzar.
Puedes cambiarlo para que aparezcan en dirección de bloque, para el lenguaje de tu documento, seleccionando flex-direction: column. Luego flex-start estará donde la parte superior del primer parrafo de texto comenzaria.
Si cambias flex-direction a uno de los valores inversos, entonces se distribuirán desde el eje final y en el orden inverso a la forma en que se escriben las palabras en el idioma de su documento. flex-start cambiará al final de ese eje — por lo tanto, a la ubicación donde se ajustarán sus líneas si trabaja en filas, o al final de su último párrafo de texto, en la dirección en bloque.
Usando auto margenes para la alineación en el eje principal
No tenemos una propiedad justify-items o justify-self disponible en el eje principal para nuestros items, ya que estos son tratados como un grupo en este eje. Sin embargo es posible realizar cierta alineación individual, para separar un elemento o un grupo de elementos de otros, usando automargenes, o margenes automaticos con flebox.
Un patrón común es una barra de navegación donde algunos elementos clave se alinean a la derecha, con el grupo principal a la izquierda. Podría pensarse que este debería ser un caso de uso para una propiedad de justify-self , sin embargo, considere la imagen a continuación. Tengo tres artículos en un lado y dos en el otro. Si pudiera usar justify-self en el elemento d, también cambiaría la alineación del artículo e que sigue, lo cual puede o no ser mi intención.
En cambio podemos enfocarnos en el item 4 y separarlo de los tres primeros elementos dandole a este un valor al margin-left de auto. El auto margen tomará todo el espacio que puedan en su eje — así es como funciona el centrado de un bloque con los margenes automáticos a derecha e izquierda. Cada lado trata de ocupar tanto espacio como puede, y así el bloque se empuja hacia el medio.
En este ejemplo en vivo, tenemos elementos flexibles, organizados simplemente en una fila con los valores básicos de flexión, y la clase push tiene margin-left: auto. Puedes intentar eliminarlo o agregar la clase a otro elemento para ver cómo funciona.
Futuras caracteristicas de alineación para Flexbox
Al principio de este artículo, expliqué que las propiedades de alineación actualmente contenidas en la especificación de flexbox de Nivel 1 también se incluyen en el Nivel de Alineación de Casillas 3, que puede extender estas propiedades y valores en el futuro. Ya hemos visto un lugar donde esto ha sucedido, con la introducción del space-evenly para las propiedades de align-content y justify-content.
El módulo de alineación de cuadro también incluye otros métodos para crear espacio entre elementos, como la función de column-gap y ow-gap, como se ve en el Diseño de rejillas de CSS. La inclusión de estas propiedades en la Alineación de cajas significa que en el futuro también deberíamos poder utilizar column-gap y row-gap tambien en diseños flexibles. Esto significará que no tendremos que usar márgenes para espaciar los elementos flexibles.
Mi sugerencia al explorar en profundidad la alineación de flexbox es hacerlo conjuntamente con la alineación en Diseño de rejillas. Ambas especificaciones utilizan las propiedades de alineación que se detallan en la especificación de Alineación de cajas. Puede ver cómo se comportan estas propiedades cuando se trabaja con una cuadrícula en el artículo de MDN Alineación de cajas , y también he comparado cómo funciona la alineación en estas especificaciones en mi Hoja de trucos de alineacion de cajas.