css justify self - En CSS Flexbox, ¿por qué no hay propiedades de "elementos de justificación" y "justificación propia"?




3 Answers

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 los elementos flexibles a lo largo del eje transversal hay tres propiedades: align-content , align-items .

La pregunta entonces pregunta:

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

Una respuesta puede ser: porque no son necesarias.

La especificación de 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 el 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 flexibles.

Hay cinco opciones de alineación:

  • flex-start ~ Los elementos de Flex están empaquetados hacia el inicio de la línea.

  • flex-end ~ Los artículos de Flex están empacados hacia el final de la línea.

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

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

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

Auto márgenes

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

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

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 un grupo de elementos flexibles alinear a la derecha ( justify-content: flex-end ) pero hacer 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 permanecen en el extremo derecho, y todo se ajusta sin problemas ("flexiona") a diferentes tamaños de pantalla.

Otros escenarios útiles:

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

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

Puedes usar esto en el artículo flex:

.box56 {
    margin: auto;
}

Esta alternativa es útil al 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 espacio libre.

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

En los ejemplos a continuación, se introducen los elementos invisibles de terceros (cuadros 61 y 68) para equilibrar los elementos "reales" (cuadro 63 y 66).

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 puedes usar posicionamiento absoluto. Los tres métodos se cubren aquí: Centrar y alinear por abajo los elementos flexibles

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

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

Escenario de la pregunta:

  • en una fila de tres elementos flexibles, fije el elemento central al 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 de space-around y space-around propiedad justify-content no mantendrán el elemento central centrado en relación con el contenedor si los elementos adyacentes tienen diferentes anchos ( consulte la demostración ).

Como se indicó, a menos que todos los elementos flexibles tengan la misma anchura o altura (dependiendo de flex-direction ), el elemento central no puede estar realmente centrado. 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;
}
<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 elementos flexibles . Esto permite que el elemento central esté perfectamente centrado sin importar el tamaño de sus hermanos.

Solo tenga en cuenta que, como todos los elementos posicionados absolutamente, 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 a continuación, el elemento central está centrado con una posición absoluta y los elementos externos permanecen en flujo. Pero el mismo diseño se puede lograr de manera inversa justify-content: center el elemento central con justify-content: center y coloque absolutamente los elementos externos.

Solución # 2: Contenedores Flex 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 ) ahora es un elemento flexible.
  • A cada elemento .box se le asigna flex: 1 para distribuir el espacio del contenedor por igual.
  • Ahora los elementos están consumiendo todo el espacio en la fila y tienen el mismo ancho.
  • Convierta cada elemento en un contenedor flexible (anidado) y agregue justify-content: center .
  • Ahora cada elemento span es un elemento flex centrado.
  • Utilice los márgenes auto flexión para desplazar el span exterior hacia la izquierda y hacia la derecha.

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

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

8.1. Alineación con márgenes auto

Antes de la alineación a través de 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, he aquí 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 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-elements en el contenedor de flex.

(Crédito: @oriol para el código, y @crl para la etiqueta)

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

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

stretch work

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:

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

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

Mi punto al describir cómo funciona el trabajo de los ejes es que no parece haber nada especial en ninguna de las dos direcciones. El eje principal, el eje transversal, ambos son iguales en términos de importancia y flex-direction facilita el cambio de ida y vuelta.

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

¿Por qué se align-content align-items 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:

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

  • hacer un grupo de elementos flexibles alinear a la derecha ( justify-content: flex-end ) pero hacer 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 se mantienen en el extremo derecho, y todo se ajusta sin problemas ("flexiona") a diferentes tamaños de pantalla.

  • en una fila de tres elementos flexibles, fije el elemento central al 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 de space-around y space-between propiedad justify-content no mantendrán el elemento central centrado en relación con el contenedor si los elementos adyacentes tienen diferentes anchos.

#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 middle box will only be truly centered if adjacent boxes are equal width</p>

versión jsFiddle

En el momento de escribir este artículo, no se mencionan justify-items justify justify-self o justify justify-items en la especificación de flexbox .

Sin embargo, en el Módulo de Alineación de Casillas CSS , que es la propuesta inacabada del W3C para establecer un conjunto común de propiedades de alineación para su uso en todos los modelos de cajas, existe lo siguiente:

Fuente: W3C

Notará que los elementos de justify-self y de justify-items se están considerando ... pero no para flexbox .

Terminaré reiterando la pregunta principal:

¿Por qué no hay propiedades de "elementos de justificación" y "auto-justificación"?




Esto se solicitó en la lista de estilo www, y Tab Atkins (editor de especificaciones) proporcionó una respuesta que explica por qué . Voy a elaborar sobre esto un poco aquí.

Para comenzar, asumamos inicialmente que nuestro contenedor flexible es de una sola línea ( flex-wrap: nowrap ). En este caso, existe una clara 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 un elemento personalizado "alinearse" en el eje transversal (ya que cada elemento se alinea por separado, solo), mientras que no tiene sentido en el eje principal (ya que allí, el los artículos están alineados colectivamente).

Para flexbox multilínea, la misma lógica se aplica a cada "línea flexible". En una línea dada, los elementos se alinean individualmente en el eje transversal (ya que solo hay un elemento por línea, en el eje transversal), en comparación con el eje principal.

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

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

En contraste, en el eje transversal, tenemos una propiedad *-self y una *-content . 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 elementos flexibles individuales en el eje transversal, dentro de una línea flexible determinada.

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




Hay justify-items .

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




Related