diff options
Diffstat (limited to 'files/zh-cn/web/css/place-items/index.html')
| -rw-r--r-- | files/zh-cn/web/css/place-items/index.html | 281 |
1 files changed, 281 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}</div> + + + +<p><a href="/en-US/docs/Web/CSS">CSS</a> 中的 <strong><code>place-items</code></strong> 是一个<a href="/en-US/docs/Web/CSS/Shorthand_properties">简写属性</a> ，它允许你在相关的布局（如 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid</a> 或 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>）中可以同时沿着块级和内联方向对齐元素 (例如：{{CSSxRef("align-items")}} 和 {{CSSxRef("justify-items")}} 属性) 。如果未提供第二个值，则第一个值作为第二个值的默认值。</p> + +<div>{{EmbedInteractiveExample("pages/css/place-items.html")}}</div> + + + +<h2 id="构成属性">构成属性</h2> + +<p>该属性是以下两个 CSS 属性的简写：</p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/align-items"><code>align-items</code></a></li> + <li><a href="/en-US/docs/Web/CSS/justify-items"><code>justify-items</code></a></li> +</ul> + +<h2 id="语法">语法</h2> + +<pre class="brush:css notranslate">/* 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; +</pre> + +<h3 id="值">值</h3> + +<dl> + <dt><code>auto</code></dt> + <dd><code>auto</code> 实际的值继承父自元素的 <code>justify-items</code> 值，除非该元素没有父元素或是用了绝对定位。在这些示例中，<code>auto</code> 表示 <code>normal</code> 。</dd> + <dt><code>normal</code></dt> + <dd><code>normal</code> 的效果取决于我们使用哪种布局方式： + <ul> + <li>在块级布局中，<code>normal</code> 和 <code>start</code> 一样。</li> + <li>在绝对定位布局中，关键字在<em>被替换的</em>绝对定位元素上的行为类似于 <code>start</code>，在<em>所有其他</em>绝对定位的元素上表现类似 <code>stretch</code>。</li> + <li>在表格单元格布局中，此关键字没有意义，因为该属性<em>被忽略</em>。</li> + <li>在 flexbox 布局中，此关键字没有意义，因为该属性<em>被忽略</em>。</li> + <li>在 grid 布局中，此关键字和 <code>stretch</code> 的行为相似，但是具有宽高比和固有尺寸的元素行为和 <code>start</code> 相似。</li> + </ul> + </dd> + <dt><code>start</code></dt> + <dd>在适当的轴线上，元素块沿着对齐容器的起始边缘对齐。</dd> + <dt><code>end</code></dt> + <dd>在适当的轴线上，元素块沿着对齐容器的结束边缘对齐。</dd> + <dt><code>flex-start</code></dt> + <dd>对齐方式取决于 flex 容器的的开始方向。（水平和垂直两个方向）<br> + 这只对 flex 布局元素生效，对于不是 flex 容器的子元素，它被视为 <code>start</code> 。</dd> + <dt><code>flex-end</code></dt> + <dd>对齐方式取决于 flex 容器的的结束方向。（水平和垂直两个方向）<br> + 这只对 flex 布局元素生效，对于不是 flex 容器的子元素，它被视为 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">end</span></font> 。</dd> + <dt><code>self-start</code></dt> + <dd>沿着轴线的头部对齐。</dd> + <dt><code>self-end</code></dt> + <dd>沿着轴线的尾部对齐。</dd> + <dt><code>center</code></dt> + <dd>沿着对齐容器的中心对齐。</dd> + <dt><code>left</code></dt> + <dd>沿着对齐容器的左侧对齐，如果属性的轴不与内联轴平行，则该值的行为和 <code>start</code> 类似。</dd> + <dt><code>right</code></dt> + <dd>沿着对齐容器的右侧对齐，如果属性的轴不与内联轴平行，则该值的行为和 <code>start</code> 类似。</dd> + <dt><code>baseline<br> + first baseline</code><br> + <code>last baseline</code></dt> + <dd>指定参与第一个或最后一个基线对齐：元素的第一个或最后一个基线集的对齐基线与基线共享组中所有框共享的第一个或最后一个基线集中相应的基线对齐。</dd> + <dd><code>first baseline</code> 的回退对齐方式为 <code>start</code> ，<code>last baseline</code> 则为 <code>end</code>。</dd> + <dt><code>stretch</code></dt> + <dd>如果子项加起来的尺寸小于对齐容器的尺寸，则任何未尺寸为 <code>auto</code> 的项将增加同等的大小（不是按比例），但也会受到 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} （或等同的功能）的限制，因此所有项刚好能填满对齐容器。</dd> +</dl> + +<h2 id="形式定义">形式定义</h2> + +<p>{{cssinfo}}</p> + +<h2 id="形式语法">形式语法</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="示例">示例</h2> + +<h3 id="在弹性容器中排列元素">在弹性容器中排列元素</h3> + +<div class="hidden"> +<pre class="brush: css; notranslate">div > div { + box-sizing: border-box; + border: 2px solid #8c8c8c; + width: 50px; + display: flex; + align-items: center; + justify-content: center; +} + +#item1 { + background-color: #8cffa0; + min-height: 30px; +} + +#item2 { + background-color: #a0c8ff; + min-height: 50px; +} + +#item3 { + background-color: #ffa08c; + min-height: 40px; +} + +#item4 { + background-color: #ffff8c; + min-height: 60px; +} + +#item5 { + background-color: #ff8cff; + min-height: 70px; +} + +#item6 { + background-color: #8cffff; + min-height: 50px; + font-size: 30px; +} + +select { + font-size: 16px; +} + +.row { + margin-top: 10px; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div id="container" class="flex"> + <div id="item1">1</div> + <div id="item2">2</div> + <div id="item3">3</div> + <div id="item4">4</div> + <div id="item5">5</div> + <div id="item6">6</div> +</div> + +<div class="row"> + <label for="display">display: </label> + <select id="display"> + <option value="flex">flex</option> + <option value="grid">grid</option> + </select> +</div> + +<div class="row"> + <label for="values">place-items: </label> + <select id="values"> + <option value="start">start</option> + <option value="center">center</option> + <option value="end">end</option> + <option value="left">left</option> + <option value="right">right</option> + <option value="auto center">auto center</option> + <option value="normal start">normal start</option> + <option value="center normal">center normal</option> + <option value="start auto">start auto</option> + <option value="end normal">end normal</option> + <option value="self-start auto">self-start auto</option> + <option value="self-end normal">self-end normal</option> + <option value="flex-start auto">flex-start auto</option> + <option value="flex-end normal">flex-end normal</option> + <option value="left auto">left auto</option> + <option value="right normal">right normal</option> + <option value="baseline normal">baseline normal</option> + <option value="first baseline auto">first baseline auto</option> + <option value="last baseline normal">last baseline normal</option> + <option value="stretch auto">stretch auto</option> + </select> +</div> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">var values = document.getElementById('values'); +var display = document.getElementById('display'); +var container = document.getElementById('container'); + +values.addEventListener('change', function (evt) { + container.style.placeItems = evt.target.value; +}); + +display.addEventListener('change', function (evt) { + container.className = evt.target.value; +}); +</pre> +</div> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight[4] notranslate">#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); +} +</pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample("Placing_items_in_a_flex_container", 260, 290)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box Alignment", "#place-items-property", "place-items")}}</td> + <td>{{Spec2("CSS3 Box Alignment")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("css.properties.place-items")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li> + <li>CSS Grid Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid layouts</a></em></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li> + <li>The {{CSSxRef("align-items")}} property</li> + <li>The {{CSSxRef("align-self")}} property</li> + <li>The {{CSSxRef("justify-items")}} property</li> + <li>The {{CSSxRef("justify-self")}} property</li> +</ul> |