Vlastnost place-self: Zarovnání položky na obou osách

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

Jde o zkratku pro vlastnosti align-self a justify-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.

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:

• justify-items
• align-items

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.