Cum se justifică un singur element flexbox (suprascrie justify-content) (Programare, Css, Flexbox)

Mahks a intrebat.

Puteți suprascrie align-items cu align-self pentru un element flex.Eu caut o modalitate de a suprascrie justify-content pentru un element flex.

Dacă ați avea un container flexbox cu justify-content:flex-enddar doriți ca primul element să fie justify-content: flex-startcum se poate face acest lucru?

Cel mai bun răspuns la această întrebare a fost dat de acest mesaj: https://stackoverflow.com/a/33856609/269396

Comentarii

  • Utilizați auto marje. Vezi caseta #26 aici: stackoverflow.com/a/33856609/3597276 –  > Por Michael Benjamin.
  • Vă mulțumim că ați făcut legătura către cel mai util răspuns! –  > Por Brady Dowling.
6 răspunsuri
Pavlo

Nu pare să existe justify-self, dar puteți obține un rezultat similar setarea corespunzătoare margin la auto¹. De ex. pentru flex-direction: row (implicit) ar trebui să setați margin-right: auto pentru a alinia copilul la stânga.

¹ Acest comportament este definit de specificațiile Flexbox.

Comentarii

    61

  • Această tehnică este excelentă și funcționează și în direcția verticală. De exemplu, doriți ca ultimul element din interiorul unui container cu înălțime fixă să rămână în partea de jos. Puteți folosi „` .container { flex-direction: column; justify-content: flex-start } .last-item { margin-top: auto } „` –  > Por Christian Schlensker.
  • @krulik Acest comportament este definit de specificația Flexbox, vezi w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins –  > Por Pavlo.
  • După mai multe investigații, justify-self s-ar putea să nu aibă nicio legătură cu flexbox ci mai degrabă este utilizat cu css grids dar nu sunt sigur. Se pare că nu reușesc să o fac să funcționeze în Chrome cu flexbox. –  > Por Jake Wilson.
  • Ce se întâmplă dacă vreau ca un element să fie în stânga, iar celălalt în centru? –  > Por Fahmi.
  • „În layout-urile flexbox, această proprietate este ignorată” – preluat din documentația mozilla despre justify-self –  > Por Finlay Percy.
eeglbalazs

AFAIK nu există o proprietate pentru asta în specificații, dar iată un truc pe care l-am folosit: setați elementul container ( cel cu display:flex ) la justify-content:space-aroundApoi adăugați un element suplimentar între primul și al doilea element și setați-l la flex-grow:10 (sau o altă valoare care se potrivește cu configurația dvs.)

Editare: dacă elementele sunt aliniate strâns, este o idee bună să adăugați flex-shrink: 10; la elementul suplimentar, de asemenea, pentru ca aspectul să răspundă corect pe dispozitive mai mici.

Comentarii

  • Funcționează și fără a specifica lățimea (cel puțin așa a fost în situația mea) –  > Por eeglbalazs.
  • Încercați min-width: 0 –  > Por The Dembinski.
borkxs

Dacă nu sunteți de fapt restricționat să păstrați toate aceste elemente ca noduri de frați, puteți să le înfășurați pe cele care merg împreună într-o altă cutie flexibilă implicită și să faceți ca recipientul ambelor să folosească spațiu între ele.

Sau, dacă făceai același lucru cu flex-start și flex-end inversate, pur și simplu schimbi ordinea containerului default-flex și a copilului singuratic.

Mahks

Pentru acele situații în care lățimea elementelor pe care doriți să le utilizați flex-end este cunoscută, puteți seta flexul lor la „0 0 0 ##px” și setați elementul pe care doriți să-l flex-start cu flex:1

Acest lucru va face ca pseudo flex-start item să umple containerul, trebuie doar să îl formatați la text-align:left sau orice altceva.

Micros

Am rezolvat un caz similar prin setarea stilului elementului interior la margin: 0 auto.
Situația: Meniul meu conține de obicei trei butoane, caz în care acestea trebuie să fie justify-content: space-between. Dar atunci când există un singur buton, acesta va fi acum aliniat în centru în loc să fie aliniat la stânga.

De’Yonte W.

Pentru a extinde răspunsul lui Pavlo https://stackoverflow.com/a/34063808/1069914, puteți avea mai multe elemente copil justify-content: flex-start în comportamentul lor, dar să aveți ultimul element justify-content: flex-end

Tags:,