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




2 Answers

Sé que esto no es una respuesta, pero me gustaría contribuir a este asunto para que valga la pena. Sería genial si pudieran lanzar justify justify-self para flexbox para hacerlo verdaderamente flexible.

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

Realmente espero que el W3C tome nota de esto y al menos lo considere. =)

De esta manera, puede tener un elemento que realmente esté centrado, independientemente del tamaño del cuadro de la izquierda y la derecha. 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 asombrosos es infinita, eche un vistazo a este ejemplo "complejo".

css css3 flexbox language-lawyer w3c

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"?




Hay 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. Así que probablemente Google lo guardó de antemano para futuros lanzamientos de CSS. Solo puedo esperar que agreguen las propiedades pronto.




Related