---
title: CSS 弹性盒子布局
slug: Web/CSS/CSS_Flexible_Box_Layout
tags:
  - CSS
  - CSS Flexible Boxes
  - CSS Reference
  - CSS3布模式
  - Overview
  - TopicStub
  - 弹性盒子
  - 弹性盒子模型
  - 盒子模型
translation_of: Web/CSS/CSS_Flexible_Box_Layout
---
<p>{{CSSRef}}</p>

<p><strong>CSS 弹性盒子布局</strong>是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。</p>

<h2 id="基本例子">基本例子</h2>

<p>在以下示例中，已将容器设置为 <code>display: flex</code> ，这意味着三个子项成为弹性项。<code>justify-content</code> 的值已设置为 <code>space-between</code> ，以便在主轴上均匀地分隔项目。在每个项目之间放置等量的空间，左侧和右侧项目与Flex容器的边缘齐平。你还能看到项目在十字轴上拉伸，因为 <code>align-items</code> 的默认值为 <code>stretch</code>。这些项目伸展到Flex容器的高度，使它们看起来都像最高的项目一样高。</p>

<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>

<h2 id="参考">参考</h2>

<h3 id="CSS_属性">CSS 属性</h3>

<div class="index">
<ul>
 <li>
  <div class="index">
  <ul>
   <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("order")}}</li>
   <li></li>
   <li></li>
  </ul>
  </div>
 </li>
</ul>
</div>

<h3 id="对齐属性">对齐属性</h3>

<p>属性 <code>align-content</code>、<code>align-self</code>、<code>align-items</code> 和 <code>justify-content</code> 最初出现在 Flexbox 规范中，但现在在Box Alignment中定义，Flexbox 规范引用了 Box Alignment 规范以获取最新定义。Box Alignment中还定义了其他对齐属性。</p>

<div class="index">
<ul>
 <li>{{cssxref("align-content")}}</li>
 <li>{{cssxref("align-items")}}</li>
 <li>{{cssxref("align-self")}}</li>
 <li>{{cssxref("justify-content")}}</li>
 <li>{{cssxref("place-content")}}</li>
 <li>{{cssxref("row-gap")}}</li>
 <li>{{cssxref("column-gap")}}</li>
 <li>{{cssxref("gap")}}</li>
 <li></li>
</ul>
</div>

<h3 id="术语表">术语表</h3>

<div class="index">
<ul>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Flexbox">弹性盒子（Flexbox）</a></li>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Flex_Container">伸缩容器 （Flex Container）</a></li>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Flex_Item">弹性项目（Flex Item）</a></li>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Main_Axis">主轴（Main Axis）</a></li>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Cross_Axis">交叉轴（Cross Axis）</a></li>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Flex">伸缩性 （Flex）</a></li>
</ul>
</div>

<h2 id="指南">指南</h2>

<dl>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">弹性盒子基本概念</a></dt>
 <dd>概述flexbox的功能</dd>
 <dt><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">使用 CSS 弹性盒子</a></dt>
 <dd>循序渐进的讲解如何用此特性来建立布局。</dd>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Flexbox与其他布局方法的关系</a></dt>
 <dd>Flexbox如何与其他布局方法和其他CSS规范相关</dd>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">对齐Flex容器中的项目</a></dt>
 <dd>Box Alignment属性如何与flexbox一起使用。</dd>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">弹性项顺序</a></dt>
 <dd>解释改变项目顺序和方向的不同方法，并解决这样做的潜在问题。</dd>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">控制柔性项沿主轴的比率</a></dt>
 <dd>本文介绍了flex-grow，flex-shrink和flex-basis属性。</dd>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">精通包装弹性项</a></dt>
 <dd>如何使用多行创建Flex容器并控制这些行中项目的显示。</dd>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox"> Flexbox 的典型用例</a></dt>
 <dd>常见的设计模式是典型的flexbox用例。</dd>
 <dt><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">用弹性盒子进行 Web 应用布局</a></dt>
 <dd>讲解在 Web 应用的特定环境下如何应用弹性盒子。</dd>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Flexbox的向后兼容性</a></dt>
 <dd>Flexbox的浏览器状况，互操作性问题以及支持的旧浏览器和规范版本</dd>
</dl>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注解</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Flexbox') }}</td>
   <td>{{ Spec2('CSS3 Flexbox') }}</td>
   <td>初始定义。</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{CompatibilityTable()}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特性</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>基础支持</td>
   <td>{{CompatGeckoDesktop("20.0")}}</td>
   <td>21.0{{property_prefix("-webkit")}}<br>
    29.0</td>
   <td>10.0{{property_prefix("-ms")}}<br>
    11.0</td>
   <td>12.10</td>
   <td>6.1{{property_prefix("-webkit")}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特性</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Android</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>基础支持</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>4.4</td>
   <td>11</td>
   <td>12.10</td>
   <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td>
  </tr>
 </tbody>
</table>
</div>