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.

V obecné rovině se zapisuje takto:

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

Pokud na druhou hodnotu zapomenete, 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.

Zkratku place-self není možné použít ve flexboxu, protože tam nepochodíte s její důležitou částí – zarovnáním položky ve směru hlavní osy (align-self).

Příklad

V naší ukázce definujeme třísloupcový kontejner gridu a poslední položku zarovnáme pomocí place-self trochu jinak.

<div class="container">
  <div class="item item--1">
    Item 1
  </div>
  <div class="item item--2">
    Item 2
  </div>
  <div class="item item--3">
    Item 3
  </div>  
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 10em;  
}

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

Všechny tři položky mají omezenou výšku i šířku, aby byl hezky vidět efekt zarovnání.

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

Možné hodnoty

Pro nalezení všech možných hodnot se podívejte na referenční příručky k oběma vlastnostem, pro které je place-items zkratkou:

• justify-items – zarovnání na hlavní ose
• align-items – zarovnání na příčné ose

Podpora v prohlížečích

Vlastnost place-self v době psaní tohoto textu nepodporuje Internet Explorer.

Ve flexboxových rozvrženích nemůžete tuto vlastnost použít v žádném prohlížeči, protože to nedovoluje specifikace.

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