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

283

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

css flexbox

— Mahks
fuente

2

Usa automárgenes. Ver cuadro # 26 aquí: stackoverflow.com/a/33856609/3597276

— Michael Benjamin

¡Gracias por vincular a la respuesta más útil!

— Brady Dowling

549

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>

Expandir fragmento

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

— Pavlo
fuente

51

Esta técnica es excelente y también funciona en dirección vertical. Por ejemplo, desea que el último elemento dentro de un contenedor de altura fija se adhiera al fondo. Puede usar `` `.container {flex-direction: column; justify-content: flex-start} .last-item {margin-top: auto} ``

— Christian Schlensker

66

@krulik Este comportamiento está definido por la especificación Flexbox, ver w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins

— Pavlo

77

Después de un poco más de investigación, es justify-selfposible que no tenga nada que ver, flexboxsino que se usa, css gridspero no estoy seguro. Parece que no puedo hacer que funcione en Chrome con flexbox.

— Jake Wilson

8

¿Qué sucede si quiero que un elemento esté a la izquierda y el otro en el centro?

— Fahmi

3

"En los diseños de flexbox, esta propiedad se ignora", tomada de los documentos de Mozilla en justify-self

— Finlay Percy

19

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.

— eeglbalazs
fuente

1

Funciona sin especificar el ancho (al menos lo hizo en mi situación)

— eeglbalazs

Pruebamin-width: 0

— The Dembinski

13

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>

Expandir fragmento

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.

— borkxs
fuente

5

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 ...

— Frank Lämmer
fuente

77

Lamentablemente,In flexbox layouts, this property is ignored

— Sphinxxx

1

@Sphinxxx Sí, pero justify-self hace el trabajo en un display: gridcontenedor. Es reciente como Flexbox, por lo que permite un posicionamiento rico como align-items, align-selfasí como algunas características adicionales como la que necesitamos aquí justify-self. Lo que recomiendo es usar flexbox siempre que sea suficiente, pero si le falta algo, la cuadrícula probablemente tenga lo que está buscando. (p. ej., alinear fácilmente un elemento secundario a center-x y center-y, y otro a right-x center-y - flexbox tiene margin-left: autopara easy left + right, pero no center + right) Ejemplo: stackoverflow.com/a/57128453 / 2441655

— Venryx

1

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.

— Mahks
fuente

0

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.

— Micros
fuente