Justify-items - CSS-Tricks

Anonim

justify-itemsProprietatea este o sub-proprietate CSS Box Modul de aliniere care controlează practic alinierea elementelor de rețea în domeniul de aplicare a acestora.

.element ( justify-items: center; )

justify-itemsaliniază elementele grilei de-a lungul axei rândului (în linie). În mod specific, această proprietate vă permite să setați alinierea pentru elementele din interiorul unui container de grilă (nu grila în sine) într-o poziție specifică (de exemplu start, centerși end) sau cu un comportament (de exemplu, autosau stretch).

Când justify-itemseste utilizat, acesta setează și justify-selfvaloarea implicită pentru toate elementele de grilă, deși aceasta poate fi suprascrisă la nivelul copilului folosind justify-selfproprietatea copilului însuși.

.grid ( display: grid; justify-items: center; ) .grid-item ( justify-self: start; )

Sintaxă

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Valoarea initiala: legacy
  • Se aplică tuturor elementelor
  • Moștenit: nu
  • Valoare calculată: conform specificațiilor
  • Tipul de animație: discret

Valori

/* Basic keyword values */ justify-items: auto; justify-items: normal; justify-items: stretch; /* Baseline alignment */ justify-items: baseline; justify-items: first baseline; justify-items: last baseline; /* Positional alignment */ justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; /* Overflow alignment */ /* Used as an optional second value for positional alignment */ justify-items: safe; justify-items: unsafe; /* Legacy */ justify-items: legacy center; justify-items: legacy left; justify-items: legacy right; /* Global values */ justify-items: inherit; justify-items: initial; justify-items: unset;

Valorile de bază ale cuvintelor cheie

  • stretch: Valoare implicită. Aliniază elementele pentru a umple întreaga lățime a celulei elementului de grilă
  • auto: la fel ca valoarea lui justify-itemsîn părinte.
  • normal: Deși vedem justify-itemsfolosit cel mai adesea într-un aspect de grilă, este tehnic pentru orice aliniere a casetei și normalînseamnă lucruri diferite în context de aspect diferit, inclusiv:
    • machete la nivel de bloc ( start)
    • planuri de grilă stretch
    • flexbox (ignorat)
    • celule de masă (ignorate)
    • machete absolut poziționate ( start)
    • cutii absolut pozitionate ( stretch)
    • a înlocuit cutii absolut poziționate ( start)
.container ( justify-items: stretch; )

Valorile alinierii de bază

Aceasta aliniază linia de bază de aliniere a primei sau ultimei linii de bază a casetei cu linia de bază corespunzătoare a contextului său de aliniere.

.container ( justify-items: baseline; )
  • Alinierea de rezervă pentru first baselineeste safe start.
  • Alinierea de rezervă pentru last baselineeste safe end.
  • baselinecorespunde first baselinecând este utilizat singur

În demo-ul de mai jos (cel mai bine vizualizat în Firefox), vedem cum se aliniază elementele cu linia de bază a unei rețele bazate pe axa principală.

Valori de aliniere pozițională

  • start: Aliniază elementele la marginea de start a containerului de aliniere
  • end: Aliniază elementele cu containerul de aliniere a marginii de capăt
  • center: Aliniază elementele din centrul containerului de aliniere
  • left: Aliniază elementele din stânga containerului de aliniere
  • right: Aliniază elementele din dreapta containerului de aliniere
  • self-start: Aliniază elementele de la începutul fiecărei celule a elementelor de grilă
  • self-end: Aliniază elementele de la sfârșitul fiecărei celule a elementelor de grilă
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Valorile de aliniere a depășirii

Proprietatea de depășire determină modul în care va afișa conținutul grilei atunci când conținutul depășește limitele limită ale grilei. Deci, atunci când conținutul este mai mare decât containerul de aliniere, va rezulta o revărsare care ar putea duce la pierderea datelor. Pentru a preveni acest lucru, putem folosi safevaloarea care îi spune browserului să schimbe alinierea astfel încât să nu existe pierderi de date.

  • safe : Dacă un element depășește containerul de aliniere, startse utilizează modul.
  • unsafe : Valoarea de aliniere este păstrată așa cum este, indiferent de dimensiunea articolului sau containerul de aliniere.

Valorile moștenite

  • legacy : Când este utilizat cu un cuvânt cheie direcțional (de exemplu right, leftsau center), acel cuvânt cheie este transmis descendenților pentru a-l moșteni. Dar dacă descendentul declară, justify-self: auto;atunci legacyeste ignorat, dar totuși respectă cuvântul cheie direcțional. Valoarea se calculează la valoarea moștenită dacă nu este furnizat niciun cuvânt cheie direcțional. În caz contrar, se calculează la normal.

Demo

Mai multe informatii

  • Modulul de aliniere a casetei CSS nivelul 3 (schiță de lucru)
  • Un ghid complet pentru rețea
  • Un ghid complet pentru Flexbox

Suport pentru browser

Suportul pentru browser justify-itemsrulează un fel de gamă, deoarece este utilizat în contexte de aspect multiple, cum ar fi grila, flexbox, celule de masă. Dar, în general, dacă grila și flexbox sunt acceptate, atunci puteți presupune că și asta justify-itemseste.

Aspectul grilei

IE Margine Firefox Crom Safari Operă
Nu Peste 16 ani 45+ Peste 57 de ani 10.1+ 44+
Android Chrome Android Firefox Browser Android Safari iOS Opera Mobile
Peste 81 de ani 45+ Peste 81 de ani 10.1+ Peste 59 de ani
Sursa: caniuse

Aspect flexibil

IE Margine Firefox Crom Safari Operă
Nu 12+ Peste 20 de ani 52+ 9+ 12.1+
Android Chrome Android Firefox Browser Android Safari iOS Opera Mobile
Peste 87 de ani Peste 83 de ani Peste 81 de ani 9+ 12.1+
Sursa: caniuse

Proprietăți conexe

Almanah pe 27 octombrie 2019

alinia-elemente

Geoff Graham