---
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>