Miestne položky - Triky CSS

place-itemsNehnuteľnosť v CSS je skratka pre align-itemsa justify-itemsvlastnosti, ich kombinovanie do jediného vyhlásenia.

Bežne sa používa horizontálne a vertikálne centrovanie pomocou mriežky:

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

Tieto vlastnosti sa začali využívať zavedením rozložení Flexbox a Grid, ale dajú sa použiť aj na:

• Bloky na úrovni blokov
• Absolútne umiestnené boxy
• Statická poloha absolútne umiestnených polí
• Bunky tabuľky

Syntax

Toto ubytovacie zariadenie prijíma dvojité hodnoty, prvú pre align-itemsa druhú pre justify-items. Na align-itemsdoplnenie zarovná obsah pozdĺž zvislej osi (stĺpca), zatiaľ čo justify-itemszarovná pozdĺž vodorovnej (riadkovej) osi.

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

To je to isté ako písanie:

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

Ak je poskytnutá iba jedna hodnota, nastaví sa obidve vlastnosti. Napríklad toto:

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

... je to isté ako toto napísať:

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

Prijaté hodnoty

Táto vlastnosť je zaujímavá tým, že sa správa odlišne v závislosti od kontextu, ktorý používa. Napríklad niektoré hodnoty platia iba pre Flexbox a nebudú fungovať v nastavení Mriežka. Niektoré hodnoty navyše platia pre align-itemsvlastníctvo, zatiaľ čo iné pre justify-itemsstranu.

Ďalej je možné si myslieť, že samotné hodnoty spadajú do niekoľkých typov zarovnania: kontextové, distribučné, pozičné (ktoré sa stanú samopolohové, ak sa priamo použijú na podradený prvok v usporiadaní) a základná línia.

Rachel Andrew má vynikajúci podvádzací nástroj Box Alignment, ktorý pomáha ilustrovať účinok hodnôt.

Hodnota	Typ	Popis
auto	Kontextové	Hodnota sa príslušne upraví na základe kontextu prvku. Používa justify-itemshodnotu nadradeného prvku prvku. Ak neexistuje rodič alebo ak sa použije na prvok, ktorý je umiestnený s absolute, potom sa hodnota stane normal.
normal	Kontextové	Berie predvolené správanie kontextu rozloženia tam, kde je použitý. • Rozloženia na úrovni blokov: start • Absolútne umiestnenie: startpre nahradené absolútne prvky a stretchpre všetky ostatné • Rozloženia tabuliek: Hodnota je ignorovaná • Rozloženia Flexboxu: Hodnota je ignorovaná • Rozloženia mriežky:, stretchpokiaľ se tam, kde se chová, nepoužije poměr stran nebo vlastní velikost Páči sa mi tostart
stretch	Distribúcia	Rozbalí prvok na obidva okraje nádoby vertikálne pre align-itemsa horizontálne pre justify-items.
start	Pozičné	Všetky prvky sú proti sebe na začiatočnom (ľavom) okraji nádoby
end	Pozičné	Všetky prvky sú proti sebe zarovnané na koncovom (pravom) okraji nádoby
center	Pozičné	Položky sú zarovnané vedľa seba smerom k stredu nádoby
left	Pozičné	Položky sú zarovnané vedľa seba smerom k ľavej strane kontajnera. Ak vlastnosť nie je rovnobežná so štandardnou hornou, pravou, spodnou, ľavou osou, správa sa podobne end.
right	Pozičné	Položky sú zarovnané vedľa seba smerom k pravej strane kontajnera. Ak vlastnosť nie je rovnobežná so štandardnou hornou, pravou, spodnou, ľavou osou, správa sa podobne start.
flex-start	Pozičné	Hodnota iba pre flexbox (ktorá spadne späť na start), kde sa položky balia smerom k začiatočnej hrane kontajnera.
flex-end	Pozičné	Hodnota iba pre flexbox (ktorá spadne späť na end), kde sú položky zabalené smerom k koncovému okraju kontajnera.
self-start	Sebapozičný	Umožňuje položke v rozložení zarovnať sa na okraj kontajnera na základe jej vlastnej začiatočnej strany. V zásade má prednosť pred nastavenou hodnotou pre rodiča.
self-end	Sebapozičný	Umožňuje položke v rozložení zarovnať sa na okraj kontajnera na základe jej vlastnej koncovej strany namiesto toho, aby zdedila pozičnú hodnotu kontajnera. V zásade má prednosť pred nastavenou hodnotou pre rodiča.
first baseline last baseline	Východisková hodnota	Zarovná všetky prvky v skupine (tj. Bunky v rade) porovnaním ich základných línií zarovnania. Predvolené je, firstak baselinesa používa samostatne.

Podpora prehľadávača

Táto vlastnosť je zahrnutá v špecifikácii modelu zarovnania modelu CSS úrovne 3.

Podpora prehľadávača je dosť široká a je do veľkej miery použiteľná:

• Edge 79+ (prechod po chróme)
• Firefox 45+
• Chrome 59+
• Safari 11+

Referencie

• Úroveň CSS Box Alignment Model Level 3 - Oficiálna špecifikácia, kde je place-itemsvlastnosť pôvodne definovaná.
• Mozilla Developer Network - dokumentácia tímu Mozilla.
• Cheat Sheet Box Alignment - Osnova Rachel Andrew je veľmi užitočným zdrojom pre pochopenie pojmov zarovnania a ich definícií.