Cómo justificar un solo elemento de flexbox (anular justify-content)

Puede anular align-itemscon align-selfun elemento flexible. Estoy buscando una forma de anular justify-contentun elemento flexible.

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

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

No parece existir justify-self, pero puede lograr una configuración de resultados similar apropiada marginpara auto¹. P.ej. para flex-direction: row(predeterminado) debe configurar margin-right: autopara alinear el 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>

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

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

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

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

.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 cambie el orden del contenedor de flex predeterminado y el hijo solitario.

Parece que justify-selfllegará pronto a los navegadores . Ya hay un artículo sobre él en MDN . En el momento de escribir este artículo, el soporte del navegador es deficiente.

En cuanto a la solución de margen: tengo una cuadrícula Flexbox con huecos. No hay flex-gappropiedad (¿todavía?) Con Flexbox. Entonces, para las canaletas, estoy usando rellenos y márgenes, por lo que necesito margin: autosobrescribir los otros márgenes ...

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

Esto hará que el pseudo flex-startítem llene el contenedor, simplemente formatee text-align:lefto lo que sea.

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