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 -