aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/glossary/flex
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/glossary/flex
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-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.html44
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>&lt;flex&gt;</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>