Proprietà CSS place-items

Definizione e utilizzo

place-items L'attributo è utilizzato per la disposizione in griglia e è l'abbreviazione dei seguenti attributi:

• align-items
• justify-items

Se l'attributo place-items ha due valori:

place-items: start center;

• Il valore dell'attributo align-items è 'start'
• Il valore dell'attributo justify-items è 'center'

Se l'attributo place-items ha solo un valore:

place-items: end;

• allign-items e justify-items属性值均为 'end'

实例

例子 1

将每个 <div> 元素在其网格单元格的行内方向和块方向上都放置在开始位置：

#container {
  place-items: start;
}

亲自试一试

例子 2：书写模式

当网格容器的 writing-mode 属性值设置为 'vertical-rl' 时，块方向的结束位置从底部移动到左侧，行内方向的结束位置从右侧移动到底部：

#container {
  place-items: end;
  writing-mode: vertical-rl;
}

亲自试一试

例子 3：弹性盒布局

justify-items 属性对弹性盒布局不适用。因此，如果在弹性盒布局中使用 place-items 属性，justify-items 的值（即第二个值）会被忽略。

#wrapper {
  place-items: stretch end;
}

亲自试一试

CSS 语法

place-items: normal legacy|value|initial|inherit;

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

Guida:Layout a griglia CSS

Guida:Layout a scatola flessibile CSS

Riferimento:Proprietà align-items CSS

Riferimento:Proprietà CSS justify-items

Riferimento:Proprietà CSS writing-mode