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

Este equipo redactor ha estado mucho tiempo investigando la respuesta a tu pregunta, te brindamos la respuestas así que nuestro objetivo es serte de mucha ayuda.

Solución:

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, hay tres propiedades: align-content, align-items y align-self.

La pregunta luego pregunta:

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

Una respuesta puede ser: Porque no son necesarios.

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

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

---

justificar el contenido

los justify-content La propiedad 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 el primer y último elemento dependen de flex-direction y modo de escritura (ltr o rtl).

  

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

  

---

Márgenes automáticos

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

diferente a justify-content, que se aplica al contenedor flexible, auto los márgenes van en los artículos 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 el primer elemento se alinea 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 se puede alinear a la izquierda mientras que los elementos de navegación permanecen en el extremo derecho, 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:

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

---

Centrar 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 flexible:

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

Puede usar esto en el elemento flexible:

.box56 
    margin: auto;

Esta alternativa es útil cuando centrar 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 los elementos flexibles distribuyendo el espacio libre.

Por lo tanto, para crear equilibrio igual, para que un artículo del medio 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 (recuadros 61 y 68) para equilibrar los elementos “reales” (recuadros 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 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 sobre justify-content La propiedad no mantendrá el elemento del medio 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 tengan el mismo ancho o alto (dependiendo de flex-direction), el elemento del medio no se puede centrar realmente. Este problema es un caso sólido para una justify-self propiedad (diseñado 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.

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

Solución # 1: Posicionamiento absoluto

La especificación de la caja flexible permite el posicionamiento absoluto de los 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 un 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 con justify-content: center y posicionar 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;

  
71 short
  
72 centered
  
73 loooooooooooooooong

Así es como funciona:

• El div de nivel superior (.container) es un contenedor flexible.
• Cada div hijo (.box) ahora es un elemento flexible.
• Cada .box se da el artículo flex: 1 para distribuir equitativamente el espacio del contenedor.
• Ahora los elementos consumen todo el espacio de la fila y tienen el mismo ancho.
• Haga de cada elemento un contenedor flexible (anidado) y agregue justify-content: center.
• Ahora cada span El elemento es un elemento flexible centrado.
• Usar flex auto márgenes para desplazar el exterior spans izquierda y derecha.

También podrías renunciar justify-content y use auto márgenes exclusivamente.

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

8.1. Alineándose con auto
márgenes

Antes de la alineación mediante justify-content y 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-content por un minuto, aquí tienes una idea para una opción más.

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

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

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

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

---

PATIO DE RECREO (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 liberar justify-self para que flexbox lo haga realmente flexible.

Creo que cuando hay varios elementos en el eje, la forma más lógica de justify-self comportarse 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 (ya que cada elemento se alinea por separado, por sí solo), mientras que no tiene sentido en el eje principal (ya que allí, el 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, todos de El *-self y *-content Las propiedades tratan sobre cómo distribuir el espacio extra alrededor de las cosas. Pero la diferencia clave es que el *-self las versiones son para casos en los que hay solo una cosa en ese eje, y el *-content las versiones 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, space-around / space-between los valores tienen sentido para *-content, pero no para *-self.

SO: En el eje principal de una caja flexible, hay muchas cosas para distribuir el espacio. Entonces un *-content la propiedad tiene sentido allí, pero no un *-self propiedad.

Por el contrario, en el eje transversal, tenemos un *-self y un *-content propiedad. Uno determina cómo vamos a distribuir el espacio alrededor del muchos líneas flexiblesalign-content), mientras que el otro (align-self) determina cómo distribuir el espacio alrededor individual elementos flexibles en el eje transversal, dentro de una línea flexible determinada.

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

Finalizando este artículo puedes encontrar las acotaciones de otros usuarios, tú de igual manera tienes el poder insertar el tuyo si lo crees conveniente.

---

---

Utiliza Nuestro Buscador