css - evenly - justify content space between flex

Cómo justificar un elemento de Flexbox único(anular justify-content)

Question

Puede anular align-items con align-self para un elemento flexible. Estoy buscando una forma de anular justify-content para un elemento flexible.

Si tuviera un contenedor de flexbox con justify justify-content:flex-end , pero desea que el primer elemento se justify-content: flex-start , ¿cómo podría hacerse?

Esto fue mejor respondido por esta publicación: https://stackoverflow.com/a/33856609/269396

Answer 1

AFAIK no hay ninguna propiedad para eso en las especificaciones, pero he aquí un truco que he estado usando: configure el elemento contenedor (el que tiene display:flex ) para justify-content:space-around Luego agregue un elemento adicional entre el primero y segundo elemento y flex-grow:10 para flex-grow:10 (o algún otro valor que funcione con tu configuración)

Editar: si los artículos están bien alineados, es una buena idea agregar flex-shrink: 10; al elemento adicional también, por lo que el diseño responderá adecuadamente en dispositivos más pequeños.

Answer 2

No parece justify-self , pero puede lograr un resultado similar estableciendo el margin apropiado para auto ¹. P.ej. para flex-direction: row (predeterminado) debe establecer margin-right: auto para alinear al niño a la izquierda.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}

<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

¹ Este comportamiento está definido por la especificación de Flexbox .

Answer 3

Para aquellas situaciones en las que se conoce el ancho de los elementos que desea flex-end , puede establecer su flexión en "0 0 ## px" y establecer el elemento que desea flex-start con flex:1

Esto hará que el elemento pseudo flex-start llene el contenedor, simplemente formatéelo para text-align:left o lo que sea.

Answer 4

Resolví un caso similar al establecer el estilo del elemento interno en margin: 0 auto .
Situación: Mi menú generalmente contiene tres botones, en cuyo caso deben justify-content: space-between . Pero cuando solo hay un botón, ahora estará alineado al centro en lugar de a la izquierda.

Answer 5

Si en realidad no está restringido a mantener todos estos elementos como nodos hermanos, puede ajustar los que van juntos en otro cuadro flexible predeterminado, y hacer que el contenedor de ambos use espacio-between.

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

O si estaba haciendo lo mismo con flex-start y flex-end invertido, simplemente cambia el orden del contenedor predeterminado-flex y el hijo solitario.

Answer 6

Parece que justify-self viene pronto a los navegadores . Ya hay un artículo en developer.mozilla.org/en-US/docs/Web/CSS/justify-self . En el momento de escribir esto, el soporte del navegador es pobre.

Regarfing margin-solution: Tengo una grilla Flexbox con huecos. No existe una propiedad flex-gap (¿todavía?) Con Flexbox. Entonces, para las cunetas, estoy usando rellenos y márgenes, por lo que margin: auto necesita sobrescribir los otros márgenes ...