作者:AK7000 | 来源:互联网 | 2023-09-16 08:25
CSS 放置物品属性
原文:https://www.geeksforgeeks.org/css-place-items-property/
CSS place-items 属性是 align-items 和align-items属性的简写。在 CSS 中,简写属性意味着您可以在单个属性中设置多个属性值。所以在这里,place-items 属性可以保存 align-items 属性值和 align-items 属性值。
语法:
place-items: align-items property value justify-items property value
属性值:该属性接受对齐项和对齐项属性值的所有可能组合值。
- 自动:如果项目没有父项目,则使用该属性定义绝对定位。
- 正常:这个属性取决于我们所处的布局模式。
- 开始:该属性用于从容器开始对齐伸缩项。
- end: 此属性用于从容器的末端对齐伸缩项。
- flex-start: 该属性显示 flex 容器开始处的行。
- 伸缩端:该属性显示伸缩容器末端的伸缩线。
- 居中:该属性将伸缩项对齐容器的中心。
- 自启动:该属性将与项目起始侧的对齐容器边缘齐平包装。
- 自端:该属性将与物品端侧的对齐容器边缘齐平包装。
- 间距均匀:该属性定义了它们之间的间距相等,但与角的间距不同。
- 拉伸:该属性定义拉伸的线占据伸缩容器的剩余空间。这是默认值。
以下示例说明了 CSS 放置项属性:
示例 1: 在本例中,我们将使用星型 place-items: flex-start 属性值。
超文本标记语言
GeeksforGeeks
CSS place-items Property
Geeks
Computer
Science
Geeks
for
Portal
for
输出:
示例 2: 这里我们将使用 place-items: flex-end 属性值。
超文本标记语言
GeeksforGeeks
CSS place-items Property
Geeks
Computer
Science
Geeks
for
Portal
for
输出: