Hely-cikkek - CSS-trükkök

A place-itemsCSS-ben található tulajdonság a align-itemsés justify-itemstulajdonságok rövidítése , egyetlen deklarációba egyesítve őket.

Általánosan használt vízszintes és függőleges központosítás a Rács segítségével:

.center-inside-of-me ( display: grid; place-items: center; )

Ezeket a tulajdonságokat a Flexbox és a Grid elrendezések bevezetésével nyerték el, de a következőkre is alkalmazzák:

• Blokk szintű dobozok
• Abszolút helyzetben lévő dobozok
• Az abszolút helyzetben lévő dobozok statikus helyzete
• Táblázat sejtek

Szintaxis

A tulajdonság kettős értéket fogad el, az elsőt align-itemsa másodikra justify-items. Emlékeztetőül, align-itemsigazítja tartalom mentén függőleges (oszlop) tengelyen mivel justify-itemsigazítja mentén a vízszintes (sor) tengely.

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

Ez ugyanaz, mint az írás:

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

Ha csak egy értéket ad meg, akkor mindkét tulajdonságot beállítja. Például ez:

.item ( display: grid; place-items: start; )

… Ugyanaz, mint ezt megírni:

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

Elfogadott értékek

Érdekessé teszi ezt a tulajdonságot, hogy másként viselkedik az alkalmazott kontextustól függően. Egyes értékek például csak a Flexbox-ra vonatkoznak, és nem működnek Rács beállításban. Ezenkívül egyes értékek az align-itemsingatlanra vonatkoznak, míg mások az justify-itemsoldalra vonatkoznak.

Maguk az értékek úgy is felfoghatók, mint amelyek az igazítás számos típusába esnek: kontextuális, eloszlás, helyzeti (amely önpozicionálissá válik, ha közvetlenül a gyermek-elemre alkalmazzák az elrendezésben) és az alapvonal.

Rachel Andrew kiváló Box Alignment csalólappal rendelkezik, amely bemutatja az értékek hatását.

Érték	típus	Leírás
auto	Kontextus szerint	Az érték ennek megfelelően állítja be az elem kontextusát. Az justify-itemselem szülő elemének értékét használja . Ha nem létezik szülő, vagy egy elemre alkalmazzák, amellyel pozícionálják absolute, akkor az érték lesz normal.
normal	Kontextus szerint	Az elrendezés kontextusának alapértelmezett viselkedését veszi fel, ahol alkalmazzák. • Blokk szintű elrendezések: start • Abszolút pozicionálás: starta helyébe abszolút elemek és stretchminden más • táblázat elrendezés: Érték figyelmen kívül hagyja • flexbox elrendezések: Érték figyelmen kívül hagyja • Rács elrendezés: stretchkivéve, ha a képarány vagy belső méretre akkor használják, ha úgy viselkedik tetszikstart
stretch	terjesztés	Kiterjeszti az elemet a tartály mindkét szélére függőlegesen align-itemsés vízszintesen justify-items.
start	Helyzeti	Minden elem egymáshoz van igazítva a tartály kezdő (bal) szélén
end	Helyzeti	Minden elem egymáshoz van igazítva a tartály végső (jobb) szélén
center	Helyzeti	Az elemek egymás mellett vannak elhelyezve a tartály közepe felé
left	Helyzeti	Az elemek egymás mellett vannak elhelyezve a tartály bal oldala felé. Ha a tulajdonság nem párhuzamos a standard felső, jobb, alsó, bal tengellyel, akkor úgy viselkedik, mint end.
right	Helyzeti	Az elemek egymás mellett vannak elhelyezve a tartály jobb oldala felé. Ha a tulajdonság nem párhuzamos a standard felső, jobb, alsó, bal tengellyel, akkor úgy viselkedik, mint start.
flex-start	Helyzeti	Csak egy flexbox érték (amely visszaesik start), ahol az elemeket a konténer kezdő éle felé csomagolják.
flex-end	Helyzeti	Csak egy flexbox érték (amely visszaesik end), ahol az elemeket a tároló vége felé csomagolják.
self-start	Önpozicionáló	Lehetővé teszi, hogy egy elrendezésben lévő elem igazodjon a tároló széléhez a saját kezdőoldala alapján. Alapvetően felülbírálja a beállított értéket a szülőn.
self-end	Önpozicionáló	Lehetővé teszi egy elrendezésben lévő elemnek, hogy a tároló helyzetének értékének öröklése helyett igazodjon a tároló széléhez a saját vége alapján. Alapvetően felülbírálja a beállított értéket a szülőn.
first baseline last baseline	Alapvonal	A csoporton belüli összes elemet (azaz egy sor celláit) összehangolja az igazítási alapvonalak összehangolásával. Alapértelmezés szerint, firstha baselineönmagában használják.

Böngésző támogatás

Ezt a tulajdonságot a CSS Box Alignment Model 3 szintű specifikáció tartalmazza.

A böngésző támogatása elég széles lett és nagyrészt csak használható:

• Edge 79+ (Chromium utáni átvitel)
• Firefox 45+
• Chrome 59+
• Safari 11+

Hivatkozások

• CSS Box Alignment Model 3. szint - A hivatalos specifikáció, ahol a place-itemstulajdonságot eredetileg definiálták.
• Mozilla Developer Network - A Mozilla csapat dokumentációja.
• Box Alignment Cheat Sheet - Rachel Andrew vázlata rendkívül hasznos forrás az igazítási kifejezések és azok definícióinak megértéséhez.