CSS place-items/place-content/place-self

CSS简写对齐属性place-*系列：place-items(align-items+justify-items)、place-content(align-content+justify-content)、place-self(align-self+justify-self)、与Grid/Flexbox配合、单个值表示两个方向相同 · 难度：入门 · +10XP

CSS place-items 和 place-content —— 对齐简写

在Grid和Flexbox中，align-items和justify-items分别控制块方向和行内方向的对齐。place-items是它们的简写。place-content则是align-content和justify-content的简写。

place-items

.grid-container {
  display: grid;
  /* 旧写法 */
  align-items: center;
  justify-items: center;
  /* 新写法：一个值同时控制两个方向 */
  place-items: center;
}

place-content

.grid-container {
  display: grid;
  /* 旧写法 */
  align-content: center;
  justify-content: space-between;
  /* 新写法 */
  place-content: center space-between;  /* 先块方向，再行内方向 */
}

动手练习

1. 基础练习：用place-items:center让Grid容器内的所有子元素水平和垂直居中。
2. 进阶应用：用place-self在Grid中让某个特定的子元素单独改变对齐方式。
3. 项目实战：把项目中重复的align-*和justify-*对替换为place-*简写。