En CSS Flexbox, ¿por qué no hay propiedades “justify-items” y “justify-self”?

Considere el eje principal y el eje transversal de un contenedor flexible:

enter image description here Fuente: W3C

Para alinear elementos flexibles a lo largo del eje principal, hay una propiedad:

  • justify-content

Para alinear elementos flexibles a lo largo del eje transversal, existen tres propiedades:

  • align-content
  • align-items
  • align-self

En la imagen de arriba, el eje principal es horizontal y el eje transversal es vertical. Estas son las direcciones predeterminadas de un contenedor flexible.

Sin embargo, estas direcciones se pueden intercambiar fácilmente con la propiedad de flex-direction .

 /* main axis is horizontal, cross axis is vertical */ flex-direction: row; flex-direction: row-reverse; /* main axis is vertical, cross axis is horizontal */ flex-direction: column; flex-direction: column-reverse; 

(El eje transversal es siempre perpendicular al eje principal).

Lo que quiero decir al describir el trabajo de los ejes es que no parece haber nada especial en ninguna dirección. Eje principal, eje transversal, ambos son iguales en términos de importancia y flex-direction facilita el cambio de un lado a otro.

Entonces, ¿por qué el eje transversal obtiene dos propiedades de alineación adicionales?

¿Por qué align-content y align-items consolidan en una propiedad para el eje principal?

¿Por qué el eje principal no obtiene una propiedad de justify-self ?


Escenarios donde estas propiedades serían útiles:

  • colocando un elemento flexible en la esquina del contenedor flexible
    #box3 { align-self: flex-end; justify-self: flex-end; }

  • hacer que un grupo de elementos flexibles se alinee a la derecha ( justify-content: flex-end ) pero que el primer elemento se alinee a la izquierda ( justify-self: flex-start )

    Considere una sección de encabezado con un grupo de elementos de navegación y un logotipo. Con justify-self el logotipo podría alinearse a la izquierda, mientras que los elementos de navegación quedarían muy a la derecha, y todo se ajustaría sin problemas (“flexiona”) a diferentes tamaños de pantalla.

  • en una fila de tres elementos flexibles, pegue el artículo medio en el centro del contenedor ( justify-content: center ) y alinee los elementos adyacentes con los bordes del contenedor ( justify-self: flex-start y justify-self: flex-end )

    Tenga en cuenta que los valores space-around y space-between de la propiedad justify-content no mantendrán el elemento central centrado en relación con el contenedor si los elementos adyacentes tienen anchos diferentes.

 #container { display: flex; justify-content: space-between; background-color: lightyellow; } .box { height: 50px; width: 75px; background-color: springgreen; } .box1 { width: 100px; } .box3 { width: 200px; } #center { text-align: center; margin-bottom: 5px; } #center > span { background-color: aqua; padding: 2px; } 
 
TRUE CENTER

note that the middle box will only be truly centered if adjacent boxes are equal width

versión jsFiddle


Al momento de escribir esto, no hay mención de artículos justify-self o justify-items en la especificación de flexbox .

Sin embargo, en el Módulo de alineación de CSS Box , que es la propuesta inconclusa del W3C para establecer un conjunto común de propiedades de alineación para su uso en todos los modelos de recuadro, existe esto:

enter image description here Fuente: W3C

Notará que justify-self justify-items y justify-itemspero no para flexbox .


Terminaré reiterando la pregunta principal:

¿Por qué no hay propiedades “justificar elementos” y “justificarse”?

Métodos para alinear elementos flexibles a lo largo del eje principal

Como se indica en la pregunta:

Para alinear elementos flexibles a lo largo del eje principal, hay una propiedad: justify-content

Para alinear elementos flexibles a lo largo del eje transversal, existen tres propiedades: align-content , align-items y align-self .

La pregunta entonces pregunta:

¿Por qué no hay justify-items y justify-self propiedades justify-self ?

Una respuesta puede ser: Porque no son necesarios.

La especificación flexbox proporciona dos métodos para alinear elementos flexibles a lo largo del eje principal:

  1. La propiedad de palabra clave justify-content , y
  2. márgenes auto

justificar-contenido

La propiedad justify justify-content alinea elementos flexibles a lo largo del eje principal del contenedor flexible.

Se aplica al contenedor flexible, pero solo afecta a los elementos Flex.

Hay cinco opciones de alineación:

  • flex-start ~ Los ítems Flex se empaquetan hacia el inicio de la línea.

    enter image description here

  • flex-end ~ Los elementos Flex se empaquetan hacia el final de la línea.

    enter image description here

  • center ~ Los elementos Flex se empaquetan hacia el centro de la línea.

    enter image description here

  • space-between ~ Los elementos Flex se espacian uniformemente, con el primer elemento alineado a un borde del contenedor y el último elemento alineado al borde opuesto. Los bordes utilizados por el primer y último elemento dependen de flex-direction y el modo de escritura ( ltr o rtl ).

    enter image description here

  • space-around ~ Igual que el space-between excepto con espacios de la mitad del tamaño en ambos extremos.

    enter image description here


Márgenes automáticos

Con los márgenes auto , los elementos flexibles se pueden centrar, espaciar o agrupar en subgrupos.

A diferencia justify-content , que se aplica al contenedor flexible, los márgenes auto van en artículos flexibles.

Trabajan consumiendo todo el espacio libre en la dirección especificada.


Alinee el grupo de elementos flexibles a la derecha, pero el primer elemento a la izquierda

Escenario de la pregunta:

  • hacer que un grupo de elementos flexibles se alinee a la derecha ( justify-content: flex-end ) pero que el primer elemento se alinee a la izquierda ( justify-self: flex-start )

    Considere una sección de encabezado con un grupo de elementos de navegación y un logotipo. Con justify-self el logotipo podría alinearse a la izquierda, mientras que los elementos de navegación quedarían muy a la derecha, y todo se ajustaría sin problemas (“flexiona”) a diferentes tamaños de pantalla.

enter image description here

enter image description here


Otros escenarios útiles:

enter image description here

enter image description here

enter image description here


Coloque un elemento flexible en la esquina

Escenario de la pregunta:

  • colocando un elemento flexible en una esquina .box { align-self: flex-end; justify-self: flex-end; } .box { align-self: flex-end; justify-self: flex-end; }

enter image description here


Centre un elemento flexible vertical y horizontalmente

enter image description here

margin: auto es una alternativa para justify-content: center y align-items: center .

En lugar de este código en el contenedor flexible:

 .container { justify-content: center; align-items: center; } 

Puede usar esto en el elemento flexible:

 .box56 { margin: auto; } 

Esta alternativa es útil cuando se centra un elemento flexible que desborda el contenedor .


Centre un elemento flexible y centre un segundo elemento flexible entre el primero y el borde

Un contenedor flexible alinea elementos flexibles distribuyendo espacio libre.

Por lo tanto, para crear un equilibrio igual , de modo que un elemento del medio se pueda centrar en el contenedor con un único elemento al costado, se debe introducir un contrapeso.

En los ejemplos a continuación, se introducen elementos invisibles de tercera flexión (recuadros 61 y 68) para equilibrar los elementos “reales” (recuadro 63 y 66).

enter image description here

enter image description here

Por supuesto, este método no es nada bueno en términos de semántica.

Alternativamente, puede usar un pseudo-elemento en lugar de un elemento DOM real. O puede usar posicionamiento absoluto. Aquí se tratan los tres métodos: centro y elementos flexibles de alineación inferior

NOTA: Los ejemplos anteriores solo funcionarán, en términos de centrado verdadero, cuando los elementos más externos tengan la misma altura / ancho. Cuando los artículos flexibles tienen diferentes longitudes, vea el siguiente ejemplo.


Centre un elemento flexible cuando los artículos adyacentes varían en tamaño

Escenario de la pregunta:

  • en una fila de tres elementos flexibles, pegue el artículo medio en el centro del contenedor ( justify-content: center ) y alinee los elementos adyacentes con los bordes del contenedor ( justify-self: flex-start y justify-self: flex-end )

    Tenga en cuenta que los valores space-around y space-between en la propiedad justify-content no mantendrán el elemento central centrado en relación con el contenedor si los elementos adyacentes tienen diferentes anchos ( ver demostración ).

Como se señaló, a menos que todos los elementos flexibles sean del mismo ancho o alto (dependiendo de flex-direction ), el elemento central no puede centrarse realmente. Este problema es un buen argumento para una propiedad de justify-self (diseñada para manejar la tarea, por supuesto).

 #container { display: flex; justify-content: space-between; background-color: lightyellow; } .box { height: 50px; width: 75px; background-color: springgreen; } .box1 { width: 100px; } .box3 { width: 200px; } #center { text-align: center; margin-bottom: 5px; } #center > span { background-color: aqua; padding: 2px; } 
 
TRUE CENTER

The middle box will be truly centered only if adjacent boxes are equal width.

Sé que esta no es una respuesta, pero me gustaría contribuir a este asunto por lo que vale. Sería genial si pudieran lanzar justify justify-self para flexbox para hacerlo verdaderamente flexible.

Creo que cuando hay múltiples elementos en el eje, la forma más lógica para que justify-self comporte es alinearse con sus vecinos más cercanos (o borde) como se demuestra a continuación.

Realmente espero, el W3C toma nota de esto y al menos lo tendrá en cuenta. =)

enter image description here

De esta forma, puede tener un elemento que esté verdaderamente centrado independientemente del tamaño del cuadro izquierdo y derecho. Cuando una de las cajas llega al punto de la caja central, simplemente la empujará hasta que no haya más espacio para distribuir.

enter image description here

La facilidad de hacer diseños geniales es interminable, eche un vistazo a este ejemplo “complejo”.

enter image description here

Esto fue preguntado en la lista de estilo www, y Tab Atkins (editor de especificaciones) proporcionó una respuesta explicando por qué . Lo explicaré un poco aquí.

Para empezar, supongamos inicialmente que nuestro contenedor flexible es de una sola línea ( flex-wrap: nowrap ). En este caso, existe claramente una diferencia de alineación entre el eje principal y el eje transversal: hay múltiples elementos astackdos en el eje principal, pero solo un elemento astackdo en el eje transversal. Por lo tanto, tiene sentido tener un “autoalineamiento” personalizable por elemento en el eje transversal (ya que cada elemento se alinea por separado, por sí mismo), mientras que no tiene sentido en el eje principal (ya que allí, el los artículos se alinean colectivamente).

Para flexbox multilínea, la misma lógica se aplica a cada “línea flexible”. En una línea determinada, los elementos se alinean individualmente en el eje transversal (ya que solo hay un elemento por línea, en el eje transversal), y colectivamente en el eje principal.


Aquí hay otra forma de expresslo: por lo tanto, todas las propiedades *-self y *-content son acerca de cómo distribuir espacio adicional alrededor de las cosas. Pero la diferencia clave es que las versiones *-self son para casos donde solo hay una sola cosa en ese eje , y las versiones *-content son para cuando hay potencialmente muchas cosas en ese eje . Los escenarios de una cosa frente a muchas cosas son diferentes tipos de problemas, por lo que tienen diferentes tipos de opciones disponibles; por ejemplo, los valores de space-around / space-between tienen sentido para *-content , pero no para *-self

SO: En el eje principal de una flexbox, hay muchas cosas para distribuir el espacio. Por lo tanto, una propiedad con *-content tiene sentido allí, pero no una *-self propiedad propia.

Por el contrario, en el eje transversal, tenemos tanto una propiedad *-self como una *-content . Uno determina cómo distribuiremos el espacio alrededor de muchas líneas flexibles ( align-content ), mientras que el otro ( align-self ) determina cómo distribuir el espacio alrededor de elementos flexibles individuales en el eje transversal, dentro de una línea flexible dada.

(Estoy ignorando las propiedades *-items aquí, ya que simplemente establecen los valores predeterminados para *-self ).

Está justify-self , pero en Chrome Canary, no en la versión estable de Chrome. Incluso hay justify-items :

enter image description here

Pero por lo que puedo decir esas propiedades tampoco funcionan. Probablemente, Google lo guardó de antemano para futuras versiones de CSS. Solo puedo esperar que agreguen las propiedades pronto.

Hay justify-items .

Creo que es una nueva característica. La compatibilidad del navegador es algo que falta.