Místo-položky - Triky CSS

place-itemsNemovitost v CSS je zkratka pro align-itemsa justify-itemsvlastnosti, jejich kombinování do jediného prohlášení.

Běžné použití je horizontální a vertikální centrování pomocí mřížky:

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

Tyto vlastnosti získaly uplatnění zavedením rozvržení Flexbox a Grid, ale jsou také použity pro:

• Bloky na úrovni bloku
• Absolutně umístěné boxy
• Statická poloha absolutně umístěných boxů
• Buňky tabulky

Syntax

Vlastnost přijímá duální hodnoty, první pro align-itemsa druhou pro justify-items. Jako doplněk align-itemszarovná obsah podél svislé (sloupcové) osy, zatímco justify-itemszarovná podél vodorovné (řádkové) osy.

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

To je stejné jako psaní:

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

Pokud je zadána pouze jedna hodnota, nastaví obě vlastnosti. Například toto:

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

… Je to stejné jako psaní tohoto:

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

Přijaté hodnoty

Tato vlastnost je zajímavá tím, že se chová odlišně na základě kontextu, který se používá. Například některé hodnoty platí pouze pro Flexbox a nebudou fungovat v nastavení mřížky. Některé hodnoty platí pro align-itemsvlastnost, kde jiné pro justify-itemsstranu.

Samotné hodnoty lze dále považovat za spadající do řady typů zarovnání: kontextové, distribuční, poziční (které se stanou samopolohovými, pokud se přímo použijí na podřízený prvek v rozložení) a účaří.

Rachel Andrew má vynikající podváděcí balíček Box Alignment, který pomáhá ilustrovat účinek hodnot.

Hodnota	Typ	Popis
auto	Kontextové	Hodnota se odpovídajícím způsobem upraví na základě kontextu prvku. Využívá justify-itemshodnotu nadřazeného prvku prvku. Pokud neexistuje nadřazený prvek nebo je aplikován na prvek, který je umístěn pomocí absolute, hodnota se stane normal.
normal	Kontextové	Převezme výchozí chování kontextu rozložení, kde je použit. • rozložení úrovni bloků: start • Absolutní polohy: startpro nahrazeny absolutních prvků a stretchpro všechny ostatní • Tabulka rozložení: hodnota je ignorována • flexboxu rozvržení: hodnota je ignorována • mřížky rozvržení: stretch, pokud je použit poměr stran nebo vnitřní klížení, kde se chová jakostart
stretch	Rozdělení	Rozbalí prvek na oba okraje kontejneru svisle pro align-itemsa vodorovně pro justify-items.
start	Poziční	Všechny prvky jsou zarovnány proti sobě na počátečním (levém) okraji kontejneru
end	Poziční	Všechny prvky jsou zarovnány proti sobě na koncovém (pravém) okraji kontejneru
center	Poziční	Položky jsou zarovnány vedle sebe směrem ke středu kontejneru
left	Poziční	Položky jsou zarovnány vedle sebe směrem k levé straně kontejneru. Pokud vlastnost není rovnoběžná se standardní horní, pravou, dolní, levou osou, pak se chová jako end.
right	Poziční	Položky jsou zarovnány vedle sebe směrem k pravé straně kontejneru. Pokud vlastnost není rovnoběžná se standardní horní, pravou, dolní, levou osou, pak se chová jako start.
flex-start	Poziční	Hodnota pouze pro flexbox (která spadá zpět na start), kde jsou položky zabaleny směrem k počáteční hraně kontejneru.
flex-end	Poziční	Hodnota pouze pro flexbox (která spadá zpět na end), kde jsou položky zabaleny směrem ke koncovému okraji kontejneru.
self-start	Sebepoziční	Umožňuje položce v rozložení zarovnat se na hranu kontejneru na základě její vlastní počáteční strany. V zásadě přepíše to, co je nastavená hodnota na nadřazené.
self-end	Sebepoziční	Umožňuje položce v rozvržení zarovnat se na hranu kontejneru na základě své vlastní koncové strany namísto zdědění poziční hodnoty kontejneru. V zásadě přepíše to, co je nastavená hodnota na nadřazené.
first baseline last baseline	Základní linie	Zarovná všechny prvky ve skupině (tj. Buňky v řádku) porovnáním jejich základních linií zarovnání. Výchozí hodnota je, firstpokud baselinese používá samostatně.

Podpora prohlížeče

Tato vlastnost je zahrnuta ve specifikaci CSS Box Alignment Model Level 3.

Podpora prohlížeče je poměrně široká a do značné míry použitelná:

• Edge 79+ (přechod po chromu)
• Firefox 45+
• Chrome 59+
• Safari 11+

Reference

• CSS Box Alignment Model Level 3 - Oficiální specifikace, kde je place-itemsvlastnost původně definována.
• Mozilla Developer Network - dokumentace týmu Mozilla.
• Cheat Sheet Box Alignment - obrys Rachel Andrew je velmi užitečným zdrojem pro uchopení pojmů zarovnání a jejich definic.