Come giustificare un singolo elemento flexbox (ignorare il contenuto giustificato)

283

Puoi sostituire align-itemscon align-selfun oggetto flessibile. Sto cercando un modo per sostituire justify-contentun articolo flessibile.

Se avessi un contenitore flexbox con justify-content:flex-end, ma vuoi che sia il primo oggetto justify-content: flex-start, come puoi farlo?

La risposta è stata migliore da questo post: https://stackoverflow.com/a/33856609/269396

css flexbox

— Mahks
fonte

2

Usa i automargini. Vedi la casella n. 26 qui: stackoverflow.com/a/33856609/3597276

— Michael Benjamin,

Grazie per il collegamento alla risposta più utile!

— Brady Dowling il

550

Non sembra esserci justify-self, ma è possibile ottenere un'impostazione dei risultati simile appropriata margina auto¹. Per esempio. per flex-direction: row(impostazione predefinita) è necessario impostare margin-right: autol'allineamento del bambino a sinistra.

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

Espandi frammento

¹ Questo comportamento è definito dalle specifiche Flexbox .

— Pavlo
fonte

51

Questa tecnica è eccellente e funziona anche in direzione verticale. Ad esempio, si desidera che l'ultimo elemento all'interno di un contenitore ad altezza fissa si attacchi al fondo. Puoi usare `` .container {flex-direction: column; justify-content: flex-start} .last-item {margin-top: auto} `` `

— Christian Schlensker,

6

@krulik Questo comportamento è definito dalle specifiche Flexbox, vedere w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins

— Pavlo,

7

Dopo qualche altra indagine, justify-selfpotrebbe non avere nulla a che fare con, flexboxma piuttosto è usato con css gridsma non ne sono sicuro. Non riesco a farlo funzionare in Chrome con flexbox.

— Jake Wilson,

8

Cosa succede se voglio che un elemento sia sulla sinistra e l'altro al centro?

— Fahmi,

3

"Nei layout di flexbox, questa proprietà viene ignorata", presa dai documenti di Mozilla su justify-self

— Finlay Percy,

19

AFAIK non c'è alcuna proprietà per questo nelle specifiche, ma ecco un trucco che ho usato: imposta l'elemento contenitore (quello con display:flex) su justify-content:space-around Quindi aggiungi un elemento aggiuntivo tra il primo e il secondo elemento e impostalo su flex-grow:10(o alcuni altro valore che funziona con la tua configurazione)

Modifica: se gli elementi sono strettamente allineati, è una buona idea aggiungere flex-shrink: 10;anche l'elemento aggiuntivo, quindi il layout risponderà correttamente su dispositivi più piccoli.

— eeglbalazs
fonte

1

Funziona senza specificare la larghezza (almeno nella mia situazione)

— eeglbalazs

Provamin-width: 0

— The Dembinski,

13

Se in realtà non sei limitato a mantenere tutti questi elementi come nodi fratelli, puoi avvolgere quelli che vanno insieme in un'altra scatola flessibile predefinita e avere il contenitore di entrambi utilizzare spazio tra.

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

Espandi frammento

O se stavi facendo la stessa cosa con flex-start e flex-end invertito, devi semplicemente scambiare l'ordine del container flex-default e del figlio solitario.

— borkxs
fonte

5

Sembra justify-selfche presto arriverà ai browser . C'è già un articolo su di esso su MDN . Al momento della stesura di questo documento, il supporto del browser è scadente.

Per quanto riguarda la soluzione dei margini: ho una griglia Flexbox con lacune. Non c'è flex-gapproprietà (ancora?) Con Flexbox. Quindi, per le grondaie, sto usando padding e margini, quindi ho margin: autobisogno di sovrascrivere gli altri margini ...

— Frank Lämmer
fonte

7

Purtroppo,In flexbox layouts, this property is ignored

— Sphinxxx,

1

@Sphinxxx Sì, ma justify-self fa il lavoro in un display: gridcontenitore. È recente come il flexbox, quindi consente un posizionamento avanzato come align-items, align-selfcosì come alcune funzionalità aggiuntive come quella di cui abbiamo bisogno qui justify-self. Quello che consiglio è di usare la flexbox ogni volta che è sufficiente, ma se manca qualcosa, molto probabilmente la griglia ha quello che stai cercando. (es. facile allineamento di un bambino al centro-xe al centro-y, e un altro a destra-x centro-y - flexbox ha margin-left: autoun facile sinistra + destra, ma non centro + destra) Esempio: stackoverflow.com/a/57128453 / 2441655

— Venryx,

1

Per quelle situazioni in cui la larghezza degli elementi che si vogliono flex-endè noto, è possibile impostare la loro flessione a "0 0 ## px" e impostare la voce che si desidera flex-startconflex:1

Questo farà sì che lo pseudo flex-startoggetto riempia il contenitore, formattandolo text-align:lefto altro.

— Mahks
fonte

0

Ho risolto un caso simile impostando lo stile dell'oggetto interno su margin: 0 auto.
Situazione: il mio menu di solito contiene tre pulsanti, nel qual caso devono essere justify-content: space-between. Ma quando c'è solo un pulsante, ora sarà allineato al centro anziché a sinistra.

— Micros
fonte