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