码农教程 - 一技在手,衣食无忧! tools

目录

CSS place-items 属性

❮上一节 完整的CSS参考 下一节❯

示例

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

#container {
  place-items: start;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个place-itemsproperty 用于网格布局，是以下属性的简写属性：

如果 place-items 属性有两个值：

  • 地点项目：起始中心；
    • align-items 属性值为“start”
    • justify-items 属性值为“center”

如果 place-items 属性只有一个值：

  • 地点项目：结束；
    • align-items 和 justify-items 属性值都是“end”

展示演示❯

默认值： 正常遗产
遗传： 不
可动画： 不。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.placeItems="stretch center"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
place-items 59.0 79.0 45.0 11.0 46.0

CSS 语法

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

属性值

Value Description Demo
normal legacy Default. The element's default place-items value. The default value for align-items is 'normal', and the default value for justify-items is 'legacy'. Demo ❯
baseline Items are positioned at the baseline of the container Demo ❯
center Align items to the center of the grid cell Demo ❯
end Align items at the end of the grid cell Demo ❯
start Align items at the start of the grid cell Demo ❯
stretch Stretches grid items to fill the grid container if the grid item sizes are not set. Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

书写模式

随着writing-mode网格容器的属性值设置为'vertical-rl'，块方向的末端从下到左移动，行内方向的末端从右到下移动：

#container {
  place-items: end;
  writing-mode: vertical-rl;
}
亲自试一试 »

弹性盒

这个justify-items属性与 Flexbox 无关。所以如果place-items属性用于 Flexbox 布局中，justify-items 的值（第二个值）将被忽略。

#wrapper {
  place-items: stretch end;
}
亲自试一试 »

相关页面

CSS教程：CSS 网格

CSS教程：CSS 弹性盒

CSS 对齐项目属性：CSS 对齐项目属性

CSS justify-items 属性：CSS justify-items 属性

CSS 写入模式属性：CSS 书写模式属性


❮上一节 完整的CSS参考 下一节❯