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


Answers

No sé una respuesta pero me gusta contribuir a este asunto por lo que vale. Sería genial si pudieran lanzar justify justify-self para flexbox para hacerlo verdaderamente flexible.

En mi opinión, 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 edge) como se demuestra a continuación.

Realmente espero, W3C mira esto y al menos lo considerará. =)

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.

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

Question

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, existen 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 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 se puede alinear a la izquierda, mientras que los elementos de navegación se mantienen a la derecha, y todo se ajusta suavemente ("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;
}
<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

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:

Fuente: W3C

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

Terminaré reiterando la pregunta principal:

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




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

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.






Related