CSS003. 盒子水平垂直居中簡寫屬性（place-items）

place-items

  CSS 中的  place-items 是一個 簡寫屬性 ，它允許你在相關的布局（如  Grid 或  Flexbox）中可以同時沿着塊級和內聯方向對齊元素 (例如： align-items 和  justify-items 屬性) 。

如果未提供第二個值，則第一個值作為第二個值的默認值。

 

也就是說以后需要定義水平垂直居中的盒子就不需要再 justify-items: center 和 align-items: center 了，直接一行搞定，看起來更加專業

構成屬性

該屬性是以下兩個 CSS 屬性的簡寫：

• align-items
• justify-items

語法

/* Keyword values */
place-items: auto center;
place-items: normal start;

/* Positional alignment */
place-items: center normal;
place-items: start auto;
place-items: end normal;
place-items: self-start auto;
place-items: self-end normal;
place-items: flex-start auto;
place-items: flex-end normal;
place-items: left auto;
place-items: right normal;

/* Baseline alignment */
place-items: baseline normal;
place-items: first baseline auto;
place-items: last baseline normal;
place-items: stretch auto;

/* Global values */
place-items: inherit;
place-items: initial;
place-items: unset;

 

 

---

 

MDN對 place-items 的描述

- END -