Igazol-tételek - CSS-trükkök

A justify-itemstulajdonság a CSS Box Alignment Modul egyik tulajdonsága, amely alapvetően ellenőrzi a rácselemek összehangolását a hatókörükön belül.

.element ( justify-items: center; )

justify-itemsa rács elemeket a sor (inline) tengelye mentén igazítja. Pontosabban, ez a tulajdonság lehetővé teszi a rácstartályon belüli elemek (nem maga a rács) igazítását egy adott helyzetben (pl start. centerÉs end) vagy viselkedéssel (pl. autoVagy stretch).

Használatakor justify-itemsbeállítja az justify-selfösszes rácselem alapértelmezett értékét is, bár ez a gyermek szintjén felülírható, ha justify-selfa gyermek saját tulajdonságát használja .

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

Szintaxis

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )

• Kezdő érték: legacy
• Alkalmazható: minden elem
• Örökölt: nem
• Számított érték: a megadott
• Animáció típusa: diszkrét

Értékek

/* 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;

Alapvető kulcsszóértékek

• stretch: Alapértelmezett érték. Az elemeket úgy igazítja, hogy kitöltse a rács elem cellájának teljes szélességét
• auto: megegyezik justify-itemsa szülő értékével .
• normal: Noha justify-itemsa rácsos elrendezésben a leggyakrabban használtakat látjuk , technikailag bármilyen doboz igazításra szolgál, és normalkülönböző dolgokat jelent különböző elrendezési kontextusban, beleértve:
  • blokkszintű elrendezések ( start)
  • rács elrendezések stretch
  • flexbox (figyelmen kívül hagyva)
  • táblázat cellák (figyelmen kívül hagyva)
  • abszolút elhelyezett elrendezések ( start)
  • abszolút helyzetben lévő dobozok ( stretch)
  • kicserélt abszolút helyzetben lévő dobozok ( start)

.container ( justify-items: stretch; )

Alapvonal igazítási értékek

Ez összehangolja a doboz első vagy utolsó alapvonalának igazítási alapvonalát a hozzáillesztési kontextus megfelelő alapvonalával.

.container ( justify-items: baseline; )

• A tartalék igazítás first baselinevan safe start.
• A tartalék igazítás last baselinevan safe end.
• baselinemegfelel, first baselineha önmagában használják

Az alábbi demóban (a legjobban a Firefoxban tekinthető meg) láthatjuk, hogy az elemek hogyan illeszkednek a főtengelyen alapuló rács alapvonalához.

Pozicionális igazítási értékek

• start: Az elemeket igazítja az igazítási tartály kezdő széléhez
• end: Igazítja az elemeket a végél igazítási tartályához
• center: Igazítja az elemeket a tároló közepén
• left: Igazítja az igazítási tároló bal oldalán található elemeket
• right: Igazítja a tároló jobb oldalán lévő elemeket
• self-start: Igazítja az elemeket az egyes rácselemek elején
• self-end: Igazítja az elemeket az egyes rácselemek végén

.container ( justify-items: )

.container ( justify-items: )

.container ( justify-items: center; )

Túlcsordulás igazítási értékei

A túlcsordulási tulajdonság meghatározza, hogy miként jelenítse meg a rács tartalmát, ha a tartalom túllépi a rács határait. Tehát, ha a tartalom nagyobb, mint az igazítási tároló, az túlcsordulást eredményez, ami adatvesztéshez vezethet. Ennek megakadályozása érdekében használhatjuk azt az safeértéket, amely megadja a böngészőnek az igazítás megváltoztatását, hogy ne legyen adatvesztés.

• safe : Ha egy elem túlcsordítja az igazítási tárolót, akkor a startmód kerül felhasználásra.
• unsafe : Az igazítási érték megmarad a jelenlegi állapotától függetlenül az elem méretétől vagy az igazítási tárolótól.

Örökölt értékek

• legacy : Ha irányított kulcsszóval (pl right. leftVagy center) használjuk, akkor ezt a kulcsszót továbbadják az utódoknak, hogy örököljenek. De ha az utód kijelenti, justify-self: auto;akkor legacyfigyelmen kívül hagyja, de mégis tiszteletben tartja az irányított kulcsszót. Az érték kiszámítja az örökölt értéket, ha nincs megadva irányított kulcsszó. Ellenkező esetben kiszámítja normal.

Demó

Több információ

• CSS doboz-igazítási modul, 3. szint (Munka tervezet)
• Teljes útmutató a rácshoz
• A Flexbox teljes útmutatója

Böngésző támogatás

A böngésző támogatása justify-itemsfuttatja a színskálát, mivel több elrendezési környezetben használják, például rács, flexbox, tábla cellákban. De általában, ha a rács és a flexbox támogatott, akkor feltételezhetjük, hogy justify-itemsez is.

Rácsszerkezet

AZAZ	Él	Firefox	Króm	Szafari	Opera
Nem	16+	45+	57+	10.1+	44+

Android Chrome	Android Firefox	Android böngésző	iOS Safari	Opera Mobile
81+	45+	81+	10.1+	59+

Flex elrendezés

AZAZ	Él	Firefox	Króm	Szafari	Opera
Nem	12+	20+	52+	9+	12.1+

Android Chrome	Android Firefox	Android böngésző	iOS Safari	Opera Mobile
87+	83+	81+	9+	12.1+

Kapcsolódó tulajdonságok

Almanach 2019. október 27-én

align-items

Geoff Graham