initial commit

1 files changed, 37 insertions, 0 deletions

diff --git a/files/zh-cn/glossary/flex_container/index.html b/files/zh-cn/glossary/flex_container/index.html
new file mode 100644
index 0000000000..1643f4afb1
--- /dev/null
+++ b/files/zh-cn/glossary/flex_container/index.html
@@ -0,0 +1,37 @@
+---
+title: 伸缩容器
+slug: Glossary/Flex_Container
+tags:
+  - CSS
+  - 伸缩容器
+  - 伸缩盒子
+  - 术语
+translation_of: Glossary/Flex_Container
+---
+<p>定义一个{{glossary("flexbox")}}（伸缩盒布局），需要在一个父级元素上使用<code>display</code>属性的值：<code>flex</code>或<code>inline-flex</code>。这个父级元素将成为<strong>flex container</strong>（伸缩容器），而它的所有子元素将变成{{glossary("flex item")}}（伸缩项）。</p>
+
+<p>使用<code>flex</code>值能将元素渲染成为一个块级容器，而使用<code>inline-flex</code>值则是渲染成一个行内伸缩容器。这些值会将元素格式化，产生<strong>flex formatting context</strong>（伸缩格式化上下文），这类似于块的格式化上下文，而浮动不会干扰容器，且容器的margins（所有边距）不会随着这些项目被折叠。</p>
+
+<h2 id="了解更多">了解更多</h2>
+
+<h3 id="属性参考">属性参考</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}} 行侧轴对齐方式</li>
+ <li>{{cssxref("align-items")}} 项目自身侧轴对齐方式</li>
+ <li>{{cssxref("flex")}} 伸缩性</li>
+ <li>{{cssxref("flex-direction")}} 伸缩流</li>
+ <li>{{cssxref("flex-flow")}} 伸缩流与换行</li>
+ <li>{{cssxref("flex-wrap")}} 伸缩-换行</li>
+ <li>{{cssxref("justify-content")}} 主轴对齐</li>
+</ul>
+</div>
+
+<h3 id="延伸阅读">延伸阅读</h3>
+
+<ul>
+ <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/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/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a>（掌握伸缩项如何进行换行）</em></li>
+</ul>