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:

                                                                                                                                                   _{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, hay 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 flex-directionpropiedad.

/* 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 siempre es perpendicular al eje principal).

Mi punto al describir cómo funcionan 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-directionfacilitan el cambio hacia adelante y hacia atrás.

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

¿Por qué son align-contenty align-itemsconsolidado en una propiedad para el eje principal?

¿Por qué el eje principal no obtiene una justify-selfpropiedad?

Escenarios en los que estas propiedades serían útiles:

• colocar un artículo flexible en la esquina del contenedor flexible
  #box3 { align-self: flex-end; justify-self: flex-end; }

• hacer que un grupo de elementos flexibles se alineen 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-selfel logotipo se podría alinear a la izquierda mientras que los elementos de navegación permanecen a la derecha, y todo se ajusta suavemente ("flexiona") a diferentes tamaños de pantalla.

• en una fila de tres elementos flexibles, coloque el elemento del medio en el centro del contenedor ( justify-content: center) y alinee los elementos adyacentes con los bordes del contenedor ( justify-self: flex-starty justify-self: flex-end).

  Tenga en cuenta que los valores space-aroundy space-betweenen la justify-contentpropiedad no mantendrán el elemento central centrada alrededor del recipiente si los elementos adyacentes tienen diferentes anchuras.

#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;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

jsFiddle versión

Al momento de escribir este artículo, no se menciona justify-selfni justify-itemsen la especificación de flexbox .

Sin embargo, en el Módulo de alineación de cajas CSS , 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 cajas, existe esto:

                                                                                                                                                   _{Fuente: W3C}

Notarás eso justify-selfy justify-itemsestán siendo considerados ... pero no para flexbox .

Terminaré reiterando la pregunta principal:

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

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 artículos de flexión alinean a lo largo del eje transversal hay tres propiedades: align-content, align-itemsyalign-self .

La pregunta luego pregunta:

¿Por qué no hay propiedades justify-itemsy 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 justify-contentpropiedad de la palabra clave y
2. auto márgenes

justificar el contenido

La justify-contentpropiedad alinea los elementos flexibles a lo largo del eje principal del contenedor flexible.

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

Hay cinco opciones de alineación:

• flex-start ~ Los artículos flexibles se empaquetan hacia el comienzo de la línea.

  

• flex-end ~ Los artículos flexibles se empaquetan hacia el final de la línea.

  

• center ~ Los artículos flexibles se empaquetan hacia el centro de la línea.

  

• space-between~ Los artículos flexibles están espaciados uniformemente, con el primer artículo alineado con un borde del contenedor y el último artículo alineado con el borde opuesto. Los bordes utilizados por los primeros y últimos artículos depende de flex-directiony modo de escritura ( ltro rtl).

  

• space-around~ Igual que space-betweenexcepto con espacios de la mitad del tamaño estándar en ambos extremos.

  

Márgenes automáticos

Con automárgenes , los elementos flexibles se pueden centrar, espaciar o empaquetar en subgrupos.

A diferencia de lo justify-contentque se aplica al contenedor flexible, los automárgenes se aplican a los elementos flexibles.

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

Alinear 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 alineen 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-selfel logotipo se podría alinear a la izquierda mientras que los elementos de navegación permanecen a la derecha, y todo se ajusta suavemente ("flexiona") a diferentes tamaños de pantalla.

Otros escenarios útiles:

Coloque un artículo flexible en la esquina

Escenario de la pregunta:

• colocar un artículo flexible en una esquina .box { align-self: flex-end; justify-self: flex-end; }

Centrar un elemento flexible vertical y horizontalmente

margin: autoes una alternativa a justify-content: centery 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 al No se puede desplazar a la parte superior del elemento flexible que se desborda del contenedor .

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

Un contenedor flexible alinea los elementos flexibles distribuyendo el espacio libre.

Por lo tanto, para crear un equilibrio equitativo , de modo que un artículo intermedio pueda centrarse en el contenedor con un solo artículo al lado, se debe introducir un contrapeso.

En los ejemplos siguientes, se introducen elementos invisibles de terceros flexibles (casillas 61 y 68) para equilibrar los elementos "reales" (casillas 63 y 66).

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

Alternativamente, puede usar un pseudoelemento en lugar de un elemento DOM real. O puede utilizar el posicionamiento absoluto. Los tres métodos se tratan aquí: Elementos flexibles de alineación central e 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, consulte el siguiente ejemplo.

Centre un elemento flexible cuando los elementos adyacentes varíen en tamaño

Escenario de la pregunta:

• en una fila de tres elementos flexibles, coloque el elemento del medio en el centro del contenedor ( justify-content: center) y alinee los elementos adyacentes con los bordes del contenedor ( justify-self: flex-starty justify-self: flex-end).

  Tenga en cuenta que los valores space-aroundy space-betweenen la justify-contentpropiedad no mantendrán el elemento central centrada en relación con el contenedor si los elementos adyacentes tienen diferentes anchuras ( ver demostración ).

Como se señaló, a menos que todos los elementos flexibles tengan el mismo ancho o alto (según flex-direction), el elemento del medio no se puede centrar realmente. Este problema constituye un caso sólido para una justify-selfpropiedad (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;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

Aquí hay dos métodos para resolver este problema:

Solución # 1: Posicionamiento absoluto

La especificación de flexbox permite el posicionamiento absoluto de artículos flexibles . Esto permite que el elemento del medio esté perfectamente centrado independientemente del tamaño de sus hermanos.

Solo tenga en cuenta que, como todos los elementos absolutamente posicionados, los elementos se eliminan del flujo de documentos . Esto significa que no ocupan espacio en el contenedor y pueden superponerse a sus hermanos.

En los ejemplos siguientes, el elemento del medio está centrado con posicionamiento absoluto y los elementos externos permanecen en flujo. Pero el mismo diseño se puede lograr a la inversa: centre el elemento del medio justify-content: centery coloque absolutamente los elementos externos.

Solución # 2: Contenedores flexibles anidados (sin posicionamiento absoluto)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

Así es como funciona:

• El div ( .container) de nivel superior es un contenedor flexible.
• Cada div hijo ( .box) es ahora un elemento flexible.
• Cada .boxartículo se proporciona flex: 1para distribuir equitativamente el espacio del contenedor.
• Ahora los elementos consumen todo el espacio de la fila y tienen el mismo ancho.
• Haga de cada artículo un contenedor flexible (anidado) y agréguelo justify-content: center.
• Ahora cada spanelemento es un elemento flexible centrado.
• Utilice automárgenes flexibles para mover los exteriores hacia spanla izquierda y hacia la derecha.

También puede renunciar justify-contenty utilizar automárgenes exclusivamente.

Pero justify-contentpuede funcionar aquí porque los automárgenes siempre tienen prioridad. De la especificación:

8.1. Alineando con auto márgenes

Antes de la alineación mediante justify-contenty align-self, cualquier espacio libre positivo se distribuye a los márgenes automáticos en esa dimensión.

justificar-contenido: espacio-mismo (concepto)

Volviendo a justify-contentpor un minuto, aquí hay una idea para una opción más.

• space-same~ Un híbrido de space-betweeny space-around. Los artículos flexibles están espaciados uniformemente (como space-between), excepto que en lugar de espacios de la mitad del tamaño en ambos extremos (como space-around), hay espacios de tamaño completo en ambos extremos.

Este diseño se puede lograr con ::beforey ::afterpseudoelementos en el contenedor flexible.

^{(crédito: @oriol para el código y @crl para la etiqueta)}

ACTUALIZACIÓN: Los navegadores han comenzado a implementar space-evenly, lo que logra lo anterior. Consulte esta publicación para obtener más detalles: Igual espacio entre elementos flexibles

PLAYGROUND (incluye código para todos los ejemplos anteriores)

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

Creo que cuando hay varios elementos en el eje, la forma más lógica de justify-selfcomportarse es alinearse con sus vecinos más cercanos (o borde) como se muestra a continuación.

Realmente espero que el W3C se dé cuenta de esto y al menos lo considerará. =)

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

La facilidad para hacer diseños asombrosos es infinita, eche un vistazo a este ejemplo "complejo".

Esto se preguntó en la lista de estilo www, y Tab Atkins (editor de especificaciones) proporcionó una respuesta que explica 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, hay claramente una diferencia de alineación entre el eje principal y el eje transversal: hay varios elementos apilados en el eje principal, pero solo un elemento apilado en el eje transversal. Por lo tanto, tiene sentido tener una "alineación propia" personalizable por elemento en el eje transversal (dado que cada elemento se alinea por separado, por sí solo), mientras que no tiene sentido en el eje principal los elementos 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), frente a colectivamente en el eje principal.

Aquí hay otra forma de expresarlo: entonces, todas las propiedades *-selfy *-contenttratan sobre cómo distribuir espacio extra alrededor de las cosas. Pero la diferencia clave es que las *-selfversiones son para casos en los que solo hay una cosa en ese eje , y las *-contentversiones 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 space-around/ space-betweentienen sentido para *-content, pero no para *-self.

SO: En el eje principal de una caja flexible, hay muchas cosas para distribuir el espacio. Entonces, una *-contentpropiedad tiene sentido allí, pero no una *-selfpropiedad.

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

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

Sé que esto no usa flexbox, pero para el caso de uso simple de tres elementos (uno a la izquierda, uno en el centro, uno a la derecha), esto se puede lograr fácilmente usando display: griden el padre, grid-area: 1/1/1/1;en los hijos y justify-selfpara posicionar de esos niños.

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
</div>

Acabo de encontrar mi propia solución a este problema, o al menos mi problema.
Estaba usando en justify-content: space-aroundlugar de justify-content: space-between;.

De esta manera, los elementos finales se adherirán a la parte superior e inferior, y podría tener márgenes personalizados si lo desea.

De MDN

Las propiedades justify-self y justify-items no se implementan en flexbox. Esto se debe a la naturaleza unidimensional de flexbox y a que puede haber varios elementos a lo largo del eje, lo que hace imposible justificar un solo elemento. Para alinear elementos a lo largo del eje principal en línea en flexbox, usa la propiedad justify-content.