diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/glossary/flex | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/glossary/flex')
-rw-r--r-- | files/zh-cn/glossary/flex/index.html | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/files/zh-cn/glossary/flex/index.html b/files/zh-cn/glossary/flex/index.html new file mode 100644 index 0000000000..9a872ed034 --- /dev/null +++ b/files/zh-cn/glossary/flex/index.html @@ -0,0 +1,44 @@ +--- +title: 伸缩性 +slug: Glossary/Flex +translation_of: Glossary/Flex +--- +<p><code>flex</code> 是一个CSS的{{cssxref("display")}} 属性中新添加一个值。 随着<code>inline-flex</code>的使用,它将使它适用的元素成为一个{{glossary("flex container")}}(伸缩容器),而这个元素的每个子元素将成为 {{glossary("flex item")}}(伸缩项目)。伸缩项目将参与到flex布局中,所有由CSS Flexible Box Layout Module(CSS伸缩盒布局模型)定义的属性都能被它们使用。</p> + +<p><code>flex</code> 属性是<code>flex-grow</code>, <code>flex-shrink</code> 和 <code>flex-basis </code>属性的简写。</p> + +<p>此外, <code><flex></code> 可以作为<a href="/en-US/docs/Web/CSS/flex_value">弹性长度</a>被引用在CSS Grid(栅格)布局中。</p> + +<h2 id="了解更多">了解更多</h2> + +<h3 id="属性参考">属性参考</h3> + +<div class="index"> +<ul> + <li>{{cssxref("align-content")}} 堆栈伸缩行</li> + <li>{{cssxref("align-items")}} 侧轴上项目对齐方式</li> + <li>{{cssxref("align-self")}} 侧轴上单个项目对齐方式</li> + <li>{{cssxref("flex")}} 伸缩性</li> + <li>{{cssxref("flex-basis")}} 伸缩-基准值</li> + <li>{{cssxref("flex-direction")}} 伸缩流方向</li> + <li>{{cssxref("flex-flow")}}伸缩流的方向与换行</li> + <li>{{cssxref("flex-grow")}}伸缩-扩展基数</li> + <li>{{cssxref("flex-shrink")}} 伸缩-收缩比率</li> + <li>{{cssxref("flex-wrap")}} 伸缩-换行</li> + <li>{{cssxref("justify-content")}} 主轴对齐</li> + <li>{{cssxref("order")}} 伸缩-顺序</li> +</ul> +</div> + +<h3 id="延伸阅读">延伸阅读</h3> + +<ul> + <li><em><a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1 Specification</a>(CSS 盒布局模型一级规范)</em></li> + <li>CSS Flexbox Guide(CSS 伸缩盒子指南): <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(CSS 伸缩盒子指南): <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a>(伸缩盒子与其他布局方法的关系)</em></li> + <li>CSS Flexbox Guide(CSS 伸缩盒子指南): <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 Flexbox Guide(CSS 伸缩盒子指南): <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a>(伸缩项的顺序)</em></li> + <li>CSS Flexbox Guide(CSS 伸缩盒子指南): <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a>(控制主轴上伸缩项的比率)</em></li> + <li>CSS Flexbox Guide(CSS 伸缩盒子指南): <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a>(掌握如何包装伸缩项)</em></li> + <li>CSS Flexbox Guide(CSS 伸缩盒子指南): <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a>(伸缩盒子的典型用例)</em></li> +</ul> |