Martin Michálek Martin Michálek  – 4. 12. 2020

Vlastnost place-self určí zarovnání položky na hlavní i příčné ose pro layouty v CSS.

Vlastnost place-self

Jde o zkratku pro vlastnosti align-selfjustify-self.

Zapisuje se takto:

place-self: <hodnota align-self> <hodnota justify-self>;

Pokud není druhá hodnota přítomná, použije se první pro oba směry, ale jen za předpokladu, že je pro obě vlastnosti platná. Pokud tomu tak není, máme smůlu a bude neplatná celá deklarace.

Související

Jednoduchý příklad

V naší ukázce definujeme třísloupcový kontejner Gridu. Všechny tři položky mají omezenou výšku i šířku, aby byl hezky vidět efekt zarovnání, který zařídí vlastnost place-self na třetí položce:

.item--3 {
  place-self: end center;
}

Jak jste asi poznali, položky zarovnáváme svisle dolů (end) a vodorovně n buňky (center).

Možné hodnoty

Podívejte se na referenční příručku k oběma vlastnostem, pro které je place-items zkratkou:

Podpora v prohlížečích

Vlastnost place-self bohužel v době psaní tohoto textu nepodporuje Internet Explorer, ale ani Safari.

Aktuální informace hledejte na caniuse.com/place-self.

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?

Dotazník: Jak
se vzděláváte online?
5 minut vašeho času.
Velká pomoc pro nás.
Vyplnit →