place-items CSS 属性 - CSS

简介

place-items 是一个 CSS 属性，用于在网格布局（Grid Layout）中设置项目的对齐方式。它可以同时设置项目在水平和垂直方向上的对齐方式。

使用方式

place-items 属性可以应用于网格容器（父元素）。

.grid-container {
  display: grid;
  place-items: <align-items> <justify-items>;
}

<align-items> 和 <justify-items> 是网格容器的对齐值，它们可以是以下值之一：

• start：项目对齐到网格容器的起始边（左边或上边）；
• end：项目对齐到网格容器的结束边（右边或下边）；
• center：项目在网格容器中居中对齐；
• stretch：项目拉伸以填充整个网格区域。

你也可以使用 place-items 来设置水平和垂直方向上的对齐，它们会首先应用于垂直对齐（row axis），然后再应用于水平对齐（column axis）。

.grid-container {
  display: grid;
  place-items: center start;
}

这个例子中，项目会在垂直方向上居中对齐，并在水平方向上对齐到网格容器的起始边。

示例

.grid-container {
  display: grid;
  place-items: center stretch;
}

上面的代码片段展示了一个名为 .grid-container 的网格容器，其中的项目会在垂直方向上居中对齐，并在水平方向上拉伸以填充整个网格区域。

在网格布局中，place-items 属性可以帮助你轻松地对齐和布局网格项目，提供更好的灵活性和控制。