From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/place-items/index.html | 281 +++++++++++++++++++++++++++++ 1 file changed, 281 insertions(+) create mode 100644 files/zh-cn/web/css/place-items/index.html (limited to 'files/zh-cn/web/css/place-items/index.html') diff --git a/files/zh-cn/web/css/place-items/index.html b/files/zh-cn/web/css/place-items/index.html new file mode 100644 index 0000000000..914901a09c --- /dev/null +++ b/files/zh-cn/web/css/place-items/index.html @@ -0,0 +1,281 @@ +--- +title: place-items +slug: Web/CSS/place-items +translation_of: Web/CSS/place-items +--- +
{{CSSRef}}
+ + + +

CSS 中的 place-items 是一个简写属性 ，它允许你在相关的布局（如 Grid 或 Flexbox）中可以同时沿着块级和内联方向对齐元素 (例如：{{CSSxRef("align-items")}} 和 {{CSSxRef("justify-items")}} 属性) 。如果未提供第二个值，则第一个值作为第二个值的默认值。

+ +
{{EmbedInteractiveExample("pages/css/place-items.html")}}
+ + + +

构成属性

+ +

该属性是以下两个 CSS 属性的简写：

+ + + +

语法

+ +
/* Keyword values */
+place-items: auto center;
+place-items: normal start;
+
+/* Positional alignment */
+place-items: center normal;
+place-items: start auto;
+place-items: end normal;
+place-items: self-start auto;
+place-items: self-end normal;
+place-items: flex-start auto;
+place-items: flex-end normal;
+place-items: left auto;
+place-items: right normal;
+
+/* Baseline alignment */
+place-items: baseline normal;
+place-items: first baseline auto;
+place-items: last baseline normal;
+place-items: stretch auto;
+
+/* Global values */
+place-items: inherit;
+place-items: initial;
+place-items: unset;
+
+ +

值

+ +
+
auto
+
auto 实际的值继承父自元素的 justify-items 值，除非该元素没有父元素或是用了绝对定位。在这些示例中，auto 表示 normal 。
+
normal
+
normal 的效果取决于我们使用哪种布局方式： +
    +
  • 在块级布局中，normal 和 start 一样。
    • +
  • 在绝对定位布局中，关键字在被替换的绝对定位元素上的行为类似于 start，在所有其他绝对定位的元素上表现类似 stretch。
    • +
  • 在表格单元格布局中，此关键字没有意义，因为该属性被忽略。
    • +
  • 在 flexbox 布局中，此关键字没有意义，因为该属性被忽略。
    • +
  • 在 grid 布局中，此关键字和 stretch 的行为相似，但是具有宽高比和固有尺寸的元素行为和 start 相似。
    • +
+
+
start
+
在适当的轴线上，元素块沿着对齐容器的起始边缘对齐。
+
end
+
在适当的轴线上，元素块沿着对齐容器的结束边缘对齐。
+
flex-start
+
对齐方式取决于 flex 容器的的开始方向。（水平和垂直两个方向）
+ 这只对 flex 布局元素生效，对于不是 flex 容器的子元素，它被视为 start 。
+
flex-end
+
对齐方式取决于 flex 容器的的结束方向。（水平和垂直两个方向）
+ 这只对 flex 布局元素生效，对于不是 flex 容器的子元素，它被视为 end 。
+
self-start
+
沿着轴线的头部对齐。
+
self-end
+
沿着轴线的尾部对齐。
+
center
+
沿着对齐容器的中心对齐。
+
left
+
沿着对齐容器的左侧对齐，如果属性的轴不与内联轴平行，则该值的行为和 start 类似。
+
right
+
沿着对齐容器的右侧对齐，如果属性的轴不与内联轴平行，则该值的行为和 start 类似。
+
baseline
+ first baseline
+ last baseline
+
指定参与第一个或最后一个基线对齐：元素的第一个或最后一个基线集的对齐基线与基线共享组中所有框共享的第一个或最后一个基线集中相应的基线对齐。
+
first baseline 的回退对齐方式为 start ，last baseline 则为 end。
+
stretch
+
如果子项加起来的尺寸小于对齐容器的尺寸，则任何未尺寸为 auto 的项将增加同等的大小（不是按比例），但也会受到 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} （或等同的功能）的限制，因此所有项刚好能填满对齐容器。
+
+ +

形式定义

+ +

{{cssinfo}}

+ +

形式语法

+ +
{{csssyntax}}
+ +

示例

+ +

在弹性容器中排列元素

+ + + +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  place-items: center; /* You can change this value by selecting another option in the list */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Placing_items_in_a_flex_container", 260, 290)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box Alignment", "#place-items-property", "place-items")}}{{Spec2("CSS3 Box Alignment")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.place-items")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf