En CSS Flexbox, ¿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 los elementos flex a lo largo del eje principal hay una propiedad: justify-content

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

La pregunta entonces hace: {[70]]}

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

Una respuesta puede ser: Porque no son necesarios.

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

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

Justify-contenido

El justify-content la propiedad alinea los elementos flex a lo largo del eje principal del contenedor flex.

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

Hay cinco opciones de alineación:

• flex-start ~ Los artículos Flex se empaquetan hacia el inicio 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 alinear.

  

• space-between ~ Los elementos Flex están espaciados 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 depende de flex-direction y modo de escritura (ltr o rtl).

  

• space-around ~ Igual que space-between excepto con espacios de tamaño medio en ambos final.

  

Márgenes automáticos

Con auto margins , los elementos flex se pueden centrar, espaciar o empaquetar en subgrupos.

A diferencia de justify-content, que se aplica al contenedor flex, auto los márgenes van en los elementos flex.

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

Alinear el grupo de elementos flex a la derecha, pero el primer elemento a la izquierda

Escenario desde la pregunta:

• Hacer que un grupo de elementos flex se alinee a la derecha (justify-content: flex-end) pero haga 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 los elementos de navegación permanecen extrema derecha, y todo se ajusta suavemente ("flexiona") a diferentes tamaños de pantalla.

Otros escenarios útiles:

Coloque un elemento flexible en la esquina

Escenario de la pregunta:

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

Centro un elemento flexible vertical y horizontalmente

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

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

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

Puede usar esto en el elemento flex:

.box56 {
    margin: auto;
}

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

Centrar un elemento flexible, y centrar un segundo elemento flexible entre el primero y el borde

A flex container alinea los elementos flex distribuyendo el espacio libre.

Por lo tanto, para crear equilibrio igual, de modo que un elemento central se pueda centrar en el contenedor con un solo elemento al lado, se debe introducir un contrapeso.

En los ejemplos siguientes, se introducen los elementos invisibles de la tercera flexión (casillas 61 y 68) para equilibrar los elementos "reales" (casillas 63 y 66).

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

Alternativamente, puede usar un pseudo-elemento en lugar de un elemento DOM real. O puedes usar posicionamiento absoluto. Los tres métodos están cubiertos aquí: Centro y parte inferior-alinear elementos flexibles

NOTA: Los ejemplos anteriores solo funcionarán, en términos de centrado verdadero, cuando los elementos más externos sean iguales altura / ancho. Cuando los elementos flex tienen diferentes longitudes, consulte el siguiente ejemplo.

Centro a elemento flexible cuando los elementos adyacentes varían en tamaño

Escenario de la pregunta:

• En una fila de tres elementos flexibles, coloque el elemento central en el centro del contenedor (justify-content: center) y alinee el elemento adyacente elementos a 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 anchuras (ver demo ).

Como se ha señalado, a menos que todos los elementos flex sean de igual ancho o alto (dependiendo de flex-direction), el elemento central no puede estar verdaderamente centrado. Este problema hace un caso fuerte para una propiedad 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;
}

<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 flexbox permite para posicionamiento absoluto de los elementos flexibles. Esto permite que el elemento central 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 con sus hermanos.

En los ejemplos siguientes, el elemento central se centra con posicionamiento absoluto y los elementos externos permanecen en flujo. Pero el mismo diseño se puede lograr de manera inversa: Centre el elemento central con justify-content: center y coloque absolutamente los elementos exteriores.

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 de nivel superior (.container) es un contenedor flexible.
• Cada div hijo (.box) es ahora un elemento flexible.
• Cada .box artículo se da flex: 1 con el fin de distribuir el espacio del contenedor por igual.
• Ahora los elementos están consumiendo todo el espacio en la fila y tienen el mismo ancho.
• Haga que cada elemento sea un contenedor flexible (anidado) y agregue justify-content: center.
• Ahora cada elemento span es un elemento flex centrado.
• Utilice los márgenes flex autopara desplazar los span exteriores a la izquierda y a la derecha.

También puedes renunciar a justify-content y usar márgenes auto exclusivamente.

Pero justify-content puede funcionar aquí porque auto los márgenes siempre tienen prioridad. De la especificación:

8.1. Alineación con auto márgenes

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

Justify-content: espacio-mismo (concepto)

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

• space-same ~ Un híbrido de space-between y space-around. Los elementos Flex están espaciados uniformemente (como space-between), excepto que en lugar de espacios de tamaño medio en ambos extremos (como space-around), hay espacios de tamaño completo en ambos extremos.

Este diseño se puede lograr con ::before y ::after pseudo-elementos en el contenedor flex.

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

ACTUALIZACIÓN: Los navegadores han comenzado a implementar space-evenly, que logra lo anterior. Ver este post para más detalles: Espacio igual entre los elementos flex

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