mozilla

Revision 433067 of 使用 CSS 弹性盒

  • Revision slug: CSS/Tutorials/Using_CSS_flexible_boxes
  • Revision title: 使用 CSS 弹性盒
  • Revision id: 433067
  • Created:
  • Creator: Nightingale
  • Is current revision? No
  • Comment

Revision Content

CSS3 弹性盒,或者简称弹性盒,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲,弹性盒在两个方面相对于盒模型进行了提升,它即不使用浮动,也不会导致弹性盒容器的 margins 与其内容的外边距进行合并。 

越来越多的设计师会发现弹性盒的易用性。弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素的显示顺序和它们在代码中 的顺序是独立的,通过使用弹性盒,定位子元素变得更加简单,复杂的布局也能够使用更清晰的代码更简单的实现。独立显示被设定成只针对可见元素,而不是基于 代码的声明和导航顺序。

注意:由于 CSS 弹性盒处于候选推荐阶段,并不是所有的浏览器都提供了实现。 WebKit 实现要求使用 -webkit 前缀;Gecko 实现不需要前缀,但是有优先级关系(使用 Aurora 或者 Nightly 的情况除外);Internet Explorer 实现了规范的较旧版本,需要前缀。Opera 12.10 实现了规范的最新版本,不需要前缀。通过查看兼容性表中的每个属性,可以了解最新的兼容状态。

弹性盒概念

弹性盒布局的定义中,它可以自动调整子元素的高/宽,来很好的填充任何显示设备中的可用显示空间,收缩内容防止内容溢出。

不同于盒布局的基于垂直方向以及行内布局的基于水平方向,弹性盒布局的算法是方向无关的。 虽然盒布局在页面中工作良好,但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。虽然正 在出现的网格布局目标为大比例布局,弹性盒布局最适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需要 进行协作而做出的努力。

弹性盒布局名词

虽然弹性盒布局的讨论中自由地使用了如水平轴、内联轴和垂直轴、块级轴的词汇,仍然需要一个新的词汇表来描述这种模型。参考下面的图形来学习后面的词汇。图形显示了弹性容器有一个值为row的属性flex-direction,其意义在于包含的子元素相互之间会根据书写模式和文本流方向在主轴上水平排列,即从左到右。

flex_terms.png

弹性容器
弹性子元素的父元素。使用值 flexinline-flexdisplay
属性来定义弹性容器为弹性容器。
弹性子元素

弹性容器的每一个孩子变为一个弹性子元素。弹性容器直接包含的文本变为匿名的弹性子元素。

每个弹性盒布局以两个轴来排列。弹性子元素沿着主轴依次相互排列。侧轴垂直于主轴

  • 属性 flex-direction 定义主轴方向。
  • 属性 justify-content 定义了弹性子元素如何在当前线上沿着主轴排列。
  • 属性 align-items 定义了弹性子元素如何在当前线上沿着侧轴排列。
  • 属性 align-self 覆盖父元素的align-items属性,定义了单独的弹性子元素如何沿着侧轴排列。
方向

弹性容器的主轴开始主轴结束侧轴开始侧轴结束边缘代表了弹性子元素排列的起始和结束位置。它们具体取决于由writing-mode(从左到右、从右到左等等)属性建立的向量中的主轴和侧轴位置。

线

弹性子元素根据 flex-wrap属性控制的侧轴方向(在这个方向上可以建立垂直的新线)既可以是单独一线也可以是多线排列。

尺寸

弹性子元素宽高可相应地等价于主尺寸侧尺寸,它们都分别取决于弹性容器的主轴和侧轴。

建立弹性盒子

使用CSS建立弹性盒子样式,为 display 指定下面的值:

display : flex

或者

display : inline-flex

这样做将元素定义为弹性容器,其孩子元素即弹性子元素。 flex 值表示弹性容器为块级。inline-flex 值表示弹性容器为原子行级元素 。

注意:对于厂商的前缀标记,是向属性值而不是向属性名加。如:display:-webkit-flex

弹性子元素的注意事项

包含在弹性容器内的文本自动成为匿名的弹性子元素。然而,只包含空白的弹性子元素不会被渲染,就好像它被设定为 display:none 一样。

弹性容器的绝对定位的孩子元素会被定位,因此其静态位置会根据它们的弹性容器的主起始内容盒的角落上开始。

目前由于一个已知的问题,在弹性子元素上指定 visibility:collapse
会导致其好像被指定了 display:none 一样,但该操作的初衷是使元素具有好像被指定了 visibility:hidden 一样的效果。在该问题被解决之前建议使用visibility:hidden ,其效果在弹性子元素上等同于 visibility:collapse

相邻的弹性子元素不会发生外边距合并。使用 auto 的外边距会在垂直和水平方向上带来额外的空间,这种性质可用于对齐或分隔临近的弹性子元素。W3C弹性盒子布局模型的 使用'auto'的外边距进行对齐 部分有更多信息。

为了保证弹性子元素有一个合理的默认最小尺寸,使用 min-width:automin-height:auto。对于弹性子元素, auto 属性计算其最小的宽高不小于其内容的尺寸,保证在渲染时其大小足够容纳内容。 {{cssxref("min-width")}}  和 {{cssxref("min-height")}} 部分有更多信息

弹 性盒子的对齐会进行真正的居中,不想CSS的其他居中方法。这意味着即使弹性容器溢出,子元素仍然保持居中。有些时候这可能有问题,然而即使溢出了页面的 上沿,或左边沿(在从左到右的语言如英语;这个问题在从右到左的语言中发生在右边沿,如阿拉伯文),因为你不能滚动到那里,即使那里有内容!在将来的版本 中,对齐属性会被扩展为有一个“安全”选项。目前,如果关心这个问题,你可以使用外边距来达到居中的目的,这种方式比较“安全”,在溢出的情况下会停止居 中。在你想要居中的弹性子元素上应用自动外边距代替align-属性。在弹性容器的第一个和最后一个子元素的外侧应用自动外边距来代替justify-属性。自动外边距会伸缩并假定剩余空间,当有剩余空间时居中弹性子元素,没有剩余空间时切换会正常对齐模式。然而,如果你想要在多线弹性盒子中用基于外边距的居中替换justify-content属性,你可能就没那么幸运了,因为你需要在每一线的第一个和最后一个元素上应用外边距。除非你能提前预测哪个元素是哪一线上的最后一个元素,否则你没法稳定地在主轴上用基于外边距的居中代替 justify-content 属性

说起虽然元素的显示顺序与源代码中的顺序无关,这种无关仅对显示效果有效,不包括语音顺序和基于源代码的导航。即使是 {{cssxref("order")}} 也不影响语言和导航序列。因此开发者必须小心排列源代码中的元素以免破坏文档的可访问性。

弹性盒子的属性

{{ CSS_Reference:FlexBox() }}

不影响弹性盒子的属性

因为弹性盒子使用一种不同的布局逻辑,一些属性会在弹性容器上无效。

  •  多列模块 中的column-*属性对弹性子元素无效。
  • {{cssxref("float")}} 和 {{cssxref("clear")}} 对弹性子元素无效。使用 float 会导致 display 属性计算为 block.
  • {{cssxref("vertical-align")}} 对弹性子元素的对齐无效。

例子

基于弹性布局的例子

这个基本的例子展示了如何对元素应用弹性布局以及在弹性布局中子元素的行为。

​<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

   .flex
   {
      /* basic styling */
      width: 350px;
      height: 200px;
      border: 1px solid #555;
      font: 14px Arial;

      /* flexbox setup */
      display: -webkit-flex;
      -webkit-flex-direction: row;

      display: flex;
      flex-direction: row;
   }

   .flex > div
   {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;

      width: 30px; /* To make the transition work nicely.  (Transitions to/from
                      "width:auto" are buggy in Gecko and Webkit, at least.
                      See http://bugzil.la/731886 for more info.) */

      -webkit-transition: width 0.7s ease-out;
      transition: width 0.7s ease-out;
   }

   /* colors */
   .flex > div:nth-child(1){ background : #009246; }
   .flex > div:nth-child(2){ background : #F1F2F1; }
   .flex > div:nth-child(3){ background : #CE2B37; }

   .flex > div:hover
   {
        width: 200px;
   }
   
   </style>
    
 </head>
 <body>
  <p>Flexbox nuovo</p>
  <div class="flex">
    <div>uno</div>
    <div>due</div>
    <div>tre</div>
  </div>
 </body>
</html>

绝妙的弹性布局例子

这个例子说明了弹性布局如何根据不同的屏幕分辨率提供动态改变布局的能力。下图展示了这种转换。

HolyGrailLayout.png

这个例子正适用于桌面浏览器网页必须优化以适应于智能手机屏幕的场景。不仅仅需要元素减小尺寸,它们排列的顺序方式也必须改变。弹性布局很容易实现这种需求。

​
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

  body {
   font: 24px Helvetica;
   background: #999999;
  }

  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }
  
  #main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }
  
  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }
 
  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }
 
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
  
   #main, #page {
    -webkit-flex-flow: column;
            flex-flow: column;
   }

   #main > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
  
   #main > nav, #main > aside, header, footer {
    min-height: 50px;
    max-height: 50px;
   }
  }

 </style>
  </head>
  <body>
 <header>header</header>
 <div id='main'>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
 </div>
 <footer>footer</footer>
  </body>
</html>

操作

有几个在线的弹性盒子操作站点可用于实验:

始终要记得的一些事

描述弹性子元素如何排列的逻辑有时候非常隐晦。这是一些在计划使用弹性盒子时应避免的一些事。

弹性盒子会根据书写模式的需要进行排列。这意味着主起始点主结束点需要根据开始结束点布局。

侧起始点侧结束点取决于依赖 direction 属性值的开始结束点的定义

只要 break- 属性允许,断页可能出现在弹性盒子布局中。CSS3的 break-afterbreak-beforebreak-inside a以及CSS2.1的 page-break-beforepage-break-afterpage-break-inside 属性可能出现在弹性容器,弹性子元素以及弹性子元素的内部元素上出现。

浏览器兼容性

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]
{{ CompatGeckoDesktop("22.0") }}(Behind a pref) [2]
21.0{{ property_prefix("-webkit") }} {{ CompatNo() }} [1] 12.10 {{ CompatNo() }} [1]
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]
{{ CompatGeckoMobile("22.0") }}(Behind a pref) [2]
{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatNo() }}

注意

[1] IE10和Safati支持一种老的不兼容草案规范的版本。目前它们还没有升级到最终版本。(IE10支持一种新旧之间的过渡版本,Safari 6-、Android Browser和iOS 6-完全是老版本——译者注)

[2] Firefox 仅支持单线弹性盒子布局。要激活Firefox的支持功能,需要拥护手动改变about:config 的属性 "layout.css.flexbox.enabled" 为 true.

 
 
 

Revision Source

<p>CSS3 弹性盒,或者简称弹性盒,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的<a href="/zh-CN/docs/CSS/Layout_mode" title="/zh-CN/docs/CSS/Layout_mode">布局方式</a>。对于很多应用来讲,弹性盒在两个方面相对于盒模型进行了提升,它即不使用浮动,也不会导致弹性盒容器的 margins 与其内容的外边距进行合并。<span style="line-height: inherit;">&nbsp;</span></p>
<p>越来越多的设计师会发现弹性盒的易用性。弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素的显示顺序和它们在代码中 的顺序是独立的,通过使用弹性盒,定位子元素变得更加简单,复杂的布局也能够使用更清晰的代码更简单的实现。独立显示被设定成只针对可见元素,而不是基于 代码的声明和导航顺序。</p>
<div class="note">
  <strong>注意:</strong>由于 CSS 弹性盒处于候选推荐阶段,并不是所有的浏览器都提供了实现。 WebKit <code>实现要求使用 -webkit 前缀</code>;Gecko 实现不需要前缀,但是有优先级关系(使用 Aurora 或者 Nightly 的情况除外);Internet Explorer 实现了规范的较旧版本,需要前缀。Opera 12.10 实现了规范的最新版本,不需要前缀。通过查看兼容性表中的每个属性,可以了解最新的兼容状态。</div>
<h2 id=".E5.BC.B9.E6.80.A7.E7.9B.92.E6.A6.82.E5.BF.B5">弹性盒概念</h2>
<p>弹性盒布局的定义中,它可以自动调整子元素的高/宽,来很好的填充任何显示设备中的可用显示空间,收缩内容防止内容溢出。</p>
<p>不同于盒布局的基于垂直方向以及行内布局的基于水平方向,弹性盒布局的算法是方向无关的。 虽然盒布局在页面中工作良好,但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。虽然正 在出现的网格布局目标为大比例布局,弹性盒布局最适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需要 进行协作而做出的努力。</p>
<h2 id=".E5.BC.B9.E6.80.A7.E7.9B.92.E5.B8.83.E5.B1.80.E5.90.8D.E8.AF.8D">弹性盒布局名词</h2>
<p>虽然弹性盒布局的讨论中自由地使用了如水平轴、内联轴和垂直轴、块级轴的词汇,仍然需要一个新的词汇表来描述这种模型。参考下面的图形来学习后面的词汇。图形显示了弹性容器有一个值为<code>row</code>的属性<code>flex-direction</code>,其意义在于包含的子元素相互之间会根据书写模式和文本流方向在主轴上水平排列,即从左到右。</p>
<p><img alt="flex_terms.png" class="internal default" src="/files/3739/flex_terms.png" /></p>
<dl>
  <dt>
    弹性容器</dt>
  <dd>
    弹性子元素的父元素。使用值 <code>flex</code> 或 <code>inline-flex</code>的 <a href="/en/CSS/display" rel="internal" title="display"><code>display</code></a><br />
    属性来定义弹性容器为弹性容器。</dd>
  <dt>
    弹性子元素</dt>
  <dd>
    <p>弹性容器的每一个孩子变为一个弹性子元素。弹性容器直接包含的文本变为匿名的弹性子元素。</p>
  </dd>
  <dt>
    轴</dt>
  <dd>
    <p>每个弹性盒布局以两个轴来排列。弹性子元素沿着<strong>主轴</strong>依次相互排列<strong>。侧轴</strong>垂直于主轴<strong>。</strong></p>
    <ul>
      <li>属性 <code><a href="/en/CSS/flex-direction" rel="internal" title="flex-direction">flex-direction</a></code> 定义主轴方向。</li>
      <li>属性 <a href="/en/CSS/justify-content" rel="internal" title="en/CSS/justify-content"><code>justify-content</code></a> 定义了弹性子元素如何在当前线上沿着主轴排列。</li>
      <li>属性 <a href="/en/CSS/align-items" title="en/CSS/align-items"><code>align-items</code></a> 定义了弹性子元素如何在当前线上沿着侧轴排列。</li>
      <li>属性 <a href="/en/CSS/align-self" title="en/CSS/align-self"><code>align-self</code></a> 覆盖父元素的<code>align-items属性,</code>定义了单独的弹性子元素如何沿着侧轴排列。</li>
    </ul>
  </dd>
  <dt>
    方向</dt>
  <dd>
    <p>弹性容器的<strong>主轴开始</strong>、<strong>主轴结束</strong>和<strong>侧轴开始</strong>、<strong>侧轴结束</strong>边缘代表了弹性子元素排列的起始和结束位置。它们具体取决于由<code>writing-mode</code>(从左到右、从右到左等等)属性建立的向量中的主轴和侧轴位置。</p>
    <ul>
      <li>属性 <a href="/en/CSS/order" rel="internal" title="en/CSS/order"><code>order</code></a>&nbsp; 将元素依次分组,并绝对谁先出现。</li>
      <li>属性 <a href="/en/CSS/flex-flow" rel="internal" title="flex-flow"><code>flex-flow</code></a> 是属性 <a href="/en/CSS/flex-direction" rel="internal" title="flex-direction"><code>flex-direction</code></a> 和 <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a> 的简写,用于排列弹性子元素。</li>
    </ul>
  </dd>
  <dt>
    线</dt>
  <dd>
    <p>弹性子元素根据 <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a>属性控制的侧轴方向(在这个方向上可以建立垂直的新线)既可以是单独一线也可以是多线排列。</p>
  </dd>
  <dt>
    尺寸</dt>
  <dd>
    <p>弹性子元素宽高可相应地等价于<strong>主尺寸</strong>和<strong>侧尺寸</strong>,它们都分别取决于弹性容器的主轴和侧轴。</p>
    <ul>
      <li>属性 <code><a href="/en/CSS/min-height" title="/en/CSS/min-height">min-height</a></code> 和 <code><a href="/en/CSS/min-width" title="/en/CSS/min-width">min-width</a></code> 拥有一个新值<code>auto</code>,代表弹性子元素的最小尺寸。</li>
      <li>属性 <a href="/en/CSS/flex" rel="internal" title="en/CSS/flex"><code>flex</code></a> 是 <code><a href="/en/CSS/flex-basis" rel="internal" title="en/CSS/flex-basis">flex-basis</a></code><code>,</code><a href="/en/CSS/flex-grow" rel="internal" title="en/CSS/flex-grow"><code>flex-grow</code></a> 和 <a href="/en/CSS/flex-shrink" rel="internal" title="en/CSS/flex-shrink"><code>flex-shrink</code></a> 的缩写,代表弹性子元素的伸缩性。</li>
    </ul>
  </dd>
</dl>
<h2 id=".E5.BB.BA.E7.AB.8B.E5.BC.B9.E6.80.A7.E7.9B.92.E5.AD.90">建立弹性盒子</h2>
<p>使用CSS建立弹性盒子样式,为 <a href="/en/CSS/display" title="/en/CSS/display">display</a> 指定下面的值:</p>
<pre class="brush: css">
display : flex</pre>
<p>或者</p>
<pre class="brush: css">
display : inline-flex</pre>
<p>这样做将元素定义为弹性容器,其孩子元素即弹性子元素。 <code>flex</code> 值表示弹性容器为块级。<code>inline-flex</code> 值表示弹性容器为原子行级元素 。</p>
<div class="note">
  <strong>注意</strong>:对于厂商的前缀标记,是向属性值而不是向属性名加。如<code>:display:-webkit-flex</code>。</div>
<h2 id=".E5.BC.B9.E6.80.A7.E5.AD.90.E5.85.83.E7.B4.A0.E7.9A.84.E6.B3.A8.E6.84.8F.E4.BA.8B.E9.A1.B9">弹性子元素的注意事项</h2>
<p>包含在弹性容器内的文本自动成为匿名的弹性子元素。然而,只包含空白的弹性子元素不会被渲染,就好像它被设定为<code style="color: rgb(93,86,54); font-size: 14px"> display:none </code>一样。</p>
<p>弹性容器的绝对定位的孩子元素会被定位,因此其静态位置会根据它们的弹性容器的主起始内容盒的角落上开始。</p>
<p>目前由于一个已知的问题,在弹性子元素上指定<code style="font-size: 14px"> visibility:collapse</code><br />
  会导致其好像被指定了 <code style="font-size: 14px">display:none</code> 一样,但该操作的初衷是使元素具有好像被指定了<code style="font-size: 14px"> visibility:hidden </code>一样的效果。在该问题被解决之前建议使用<code>visibility:hidden</code> ,其效果在弹性子元素上等同于<code> visibility:collapse</code> 。</p>
<p>相邻的弹性子元素不会发生外边距合并。使用<code> auto</code> 的外边距会在垂直和水平方向上带来额外的空间,这种性质可用于对齐或分隔临近的弹性子元素。W3C弹性盒子布局模型的 <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins" title="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">使用'auto'的外边距进行对齐</a> 部分有更多信息。</p>
<p>为了保证弹性子元素有一个合理的默认最小尺寸,使用 <code>min-width:auto</code> 与 <code>min-height:auto</code>。对于弹性子元素, <code>auto</code> 属性计算其最小的宽高不小于其内容的尺寸,保证在渲染时其大小足够容纳内容。 {{cssxref("min-width")}}&nbsp; 和 {{cssxref("min-height")}} 部分有更多信息</p>
<p>弹 性盒子的对齐会进行真正的居中,不想CSS的其他居中方法。这意味着即使弹性容器溢出,子元素仍然保持居中。有些时候这可能有问题,然而即使溢出了页面的 上沿,或左边沿(在从左到右的语言如英语;这个问题在从右到左的语言中发生在右边沿,如阿拉伯文),因为你不能滚动到那里,即使那里有内容!在将来的版本 中,对齐属性会被扩展为有一个“安全”选项。目前,如果关心这个问题,你可以使用外边距来达到居中的目的,这种方式比较“安全”,在溢出的情况下会停止居 中。在你想要居中的弹性子元素上应用自动外边距代替<code>align-</code>属性。在弹性容器的第一个和最后一个子元素的外侧应用自动外边距来代替<code>justify-</code>属性。自动外边距会伸缩并假定剩余空间,当有剩余空间时居中弹性子元素,没有剩余空间时切换会正常对齐模式。然而,如果你想要在多线弹性盒子中用基于外边距的居中替换<code>justify-content属性,你可能就没那么幸运了,因为你需要在每一线的第一个和最后一个元素上应用外边距。除非你能提前预测哪个元素是哪一线上的最后一个元素,否则你没法稳定地在主轴上用基于外边距的居中代替</code><code> justify-content 属性</code>。</p>
<p>说起虽然元素的显示顺序与源代码中的顺序无关,这种无关仅对显示效果有效,不包括语音顺序和基于源代码的导航。即使是 {{cssxref("order")}} 也不影响语言和导航序列。因此开发者必须小心排列源代码中的元素以免破坏文档的可访问性。</p>
<h2 id=".E5.BC.B9.E6.80.A7.E7.9B.92.E5.AD.90.E7.9A.84.E5.B1.9E.E6.80.A7">弹性盒子的属性</h2>
<p>{{ CSS_Reference:FlexBox() }}</p>
<h3 id=".E4.B8.8D.E5.BD.B1.E5.93.8D.E5.BC.B9.E6.80.A7.E7.9B.92.E5.AD.90.E7.9A.84.E5.B1.9E.E6.80.A7">不影响弹性盒子的属性</h3>
<p>因为弹性盒子使用一种不同的布局逻辑,一些属性会在弹性容器上无效。</p>
<ul>
  <li>&nbsp;<a href="/en/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">多列模块</a> 中的column-*属性对弹性子元素无效。</li>
  <li>{{cssxref("float")}} 和 {{cssxref("clear")}} 对弹性子元素无效。使用 <code>float</code> 会导致 <code>display</code> 属性计算为 <code>block</code>.</li>
  <li>{{cssxref("vertical-align")}} 对弹性子元素的对齐无效。</li>
</ul>
<h2 id=".E4.BE.8B.E5.AD.90">例子</h2>
<h3 id=".E5.9F.BA.E4.BA.8E.E5.BC.B9.E6.80.A7.E5.B8.83.E5.B1.80.E7.9A.84.E4.BE.8B.E5.AD.90">基于弹性布局的例子</h3>
<p>这个基本的例子展示了如何对元素应用弹性布局以及在弹性布局中子元素的行为。</p>
<pre class="brush:html;">
​&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&nbsp; &lt;head&gt;
&nbsp;&nbsp;&nbsp; &lt;style&gt;

&nbsp;&nbsp; .flex
&nbsp;&nbsp; {
&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;/* basic styling */
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 350px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 200px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #555;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: 14px Arial;

&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;/* flexbox setup */
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: -webkit-flex;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -webkit-flex-direction: row;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: flex;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-direction: row;
&nbsp;&nbsp; }

&nbsp;&nbsp; .flex &gt; div
&nbsp;&nbsp; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-flex: 1 1 auto;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flex: 1 1 auto;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 30px; /* To make the transition work nicely.&nbsp; (Transitions to/from
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "width:auto" are buggy in Gecko and Webkit, at least.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; See http://bugzil.la/731886 for more info.) */

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -webkit-transition: width 0.7s ease-out;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: width 0.7s ease-out;
&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;/* colors */
&nbsp;&nbsp;&nbsp;.flex &gt; div:nth-child(1){ background : #009246; }
&nbsp;&nbsp;&nbsp;.flex &gt; div:nth-child(2){ background : #F1F2F1; }
&nbsp;&nbsp;&nbsp;.flex &gt; div:nth-child(3){ background : #CE2B37; }

&nbsp;&nbsp;&nbsp;.flex &gt; div:hover
&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 200px;
&nbsp;&nbsp; }
&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&lt;/style&gt;
&nbsp;&nbsp;&nbsp; 
&nbsp;&lt;/head&gt;
&nbsp;&lt;body&gt;
  &lt;p&gt;Flexbox nuovo&lt;/p&gt;
  &lt;div class="flex"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;uno&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;due&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;tre&lt;/div&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&lt;/body&gt;
&lt;/html&gt;</pre>
<h3 id=".E7.BB.9D.E5.A6.99.E7.9A.84.E5.BC.B9.E6.80.A7.E5.B8.83.E5.B1.80.E4.BE.8B.E5.AD.90">绝妙的弹性布局例子</h3>
<p>这个例子说明了弹性布局如何根据不同的屏幕分辨率提供动态改变布局的能力。下图展示了这种转换。</p>
<p><img alt="HolyGrailLayout.png" class="internal default" src="/files/3760/HolyGrailLayout.png" /></p>
<p>这个例子正适用于桌面浏览器网页必须优化以适应于智能手机屏幕的场景。不仅仅需要元素减小尺寸,它们排列的顺序方式也必须改变。弹性布局很容易实现这种需求。</p>
<pre class="brush:html;">
​
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&nbsp; &lt;head&gt;
&nbsp;&nbsp;&nbsp; &lt;style&gt;

&nbsp; body {
&nbsp;&nbsp; font: 24px Helvetica;
&nbsp;&nbsp; background: #999999;
&nbsp; }

&nbsp; #main {
&nbsp;&nbsp; min-height: 800px;
&nbsp;&nbsp; margin: 0px;
&nbsp;&nbsp; padding: 0px;
&nbsp;&nbsp; display: -webkit-flex;
   display:         flex;
&nbsp;&nbsp; -webkit-flex-flow: row;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flex-flow: row;
&nbsp;&nbsp; }
&nbsp;
&nbsp; #main &gt; article {
&nbsp;&nbsp; margin: 4px;
&nbsp;&nbsp; padding: 5px;
&nbsp;&nbsp; border: 1px solid #cccc33;
&nbsp;&nbsp; border-radius: 7pt;
&nbsp;&nbsp; background: #dddd88;
&nbsp;&nbsp; -webkit-flex: 3 1 60%;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flex: 3 1 60%;
&nbsp;&nbsp; -webkit-order: 2;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; order: 2;
&nbsp;&nbsp; }
&nbsp;&nbsp;
&nbsp; #main &gt; nav {
&nbsp;&nbsp; margin: 4px;
&nbsp;&nbsp; padding: 5px;
&nbsp;&nbsp; border: 1px solid #8888bb;
&nbsp;&nbsp; border-radius: 7pt;
&nbsp;&nbsp; background: #ccccff;
&nbsp;&nbsp; -webkit-flex: 1 6 20%;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flex: 1 6 20%;
&nbsp;&nbsp; -webkit-order: 1;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; order: 1;
&nbsp;&nbsp; }
&nbsp;&nbsp;
&nbsp; #main &gt; aside {
&nbsp;&nbsp; margin: 4px;
&nbsp;&nbsp; padding: 5px;
&nbsp;&nbsp; border: 1px solid #8888bb;
&nbsp;&nbsp; border-radius: 7pt;
&nbsp;&nbsp; background: #ccccff;
&nbsp;&nbsp; -webkit-flex: 1 6 20%;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flex: 1 6 20%;
&nbsp;&nbsp; -webkit-order: 3;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; order: 3;
&nbsp;&nbsp; }
&nbsp;
&nbsp; header, footer {
&nbsp;&nbsp; display: block;
&nbsp;&nbsp; margin: 4px;
&nbsp;&nbsp; padding: 5px;
&nbsp;&nbsp; min-height: 100px;
&nbsp;&nbsp; border: 1px solid #eebb55;
&nbsp;&nbsp; border-radius: 7pt;
&nbsp;&nbsp; background: #ffeebb;
&nbsp;&nbsp; }
&nbsp;
&nbsp; /* Too narrow to support three columns */
&nbsp; @media all and (max-width: 640px) {
&nbsp;&nbsp;
&nbsp;&nbsp; #main, #page {
&nbsp;&nbsp;&nbsp; -webkit-flex-flow: column;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flex-flow: column;
&nbsp;&nbsp; }

&nbsp;&nbsp; #main &gt; article, #main &gt; nav, #main &gt; aside {
&nbsp;&nbsp;&nbsp; /* Return them to document order */
&nbsp;&nbsp;&nbsp; -webkit-order: 0;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; order: 0;
&nbsp;&nbsp; }
&nbsp;&nbsp;
&nbsp;&nbsp; #main &gt; nav, #main &gt; aside, header, footer {
&nbsp;&nbsp;&nbsp; min-height: 50px;
&nbsp;&nbsp;&nbsp; max-height: 50px;
&nbsp;&nbsp; }
&nbsp; }

 &lt;/style&gt;
&nbsp; &lt;/head&gt;
&nbsp; &lt;body&gt;
 &lt;header&gt;header&lt;/header&gt;
 &lt;div id='main'&gt;
&nbsp;&nbsp;&nbsp; &lt;article&gt;article&lt;/article&gt;
&nbsp;&nbsp;&nbsp; &lt;nav&gt;nav&lt;/nav&gt;
&nbsp;&nbsp;&nbsp; &lt;aside&gt;aside&lt;/aside&gt;
 &lt;/div&gt;
 &lt;footer&gt;footer&lt;/footer&gt;
&nbsp; &lt;/body&gt;
&lt;/html&gt;</pre>
<h2 id=".E6.93.8D.E4.BD.9C">操作</h2>
<p>有几个在线的弹性盒子操作站点可用于实验:</p>
<ul>
  <li><a href="http://demo.agektmr.com/flexbox/" title="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
  <li><a href="http://the-echoplex.net/flexyboxes" title="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li>
</ul>
<h2 id=".E5.A7.8B.E7.BB.88.E8.A6.81.E8.AE.B0.E5.BE.97.E7.9A.84.E4.B8.80.E4.BA.9B.E4.BA.8B">始终要记得的一些事</h2>
<p>描述弹性子元素如何排列的逻辑有时候非常隐晦。这是一些在计划使用弹性盒子时应避免的一些事。</p>
<p>弹性盒子会根据<a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode" title="mode">书写模式</a>的需要进行排列。这意味着<strong>主起始点</strong>和<strong>主结束点</strong>需要根据<strong>开始</strong>和<strong>结束</strong>点布局。</p>
<p><strong>侧起始点</strong>和<strong>侧结束点</strong>取决于依赖<a href="/en/CSS/direction" title="direction"><code> direction </code></a>属性值的<strong>开始</strong>和<strong>结束</strong>点的定义<strong>。</strong></p>
<p>只要<code> break-</code> 属性允许,断页可能出现在弹性盒子布局中。CSS3的 <code>break-after</code>, <code>break-before</code> 和 <code>break-inside</code> a以及CSS2.1的 <code>page-break-before</code>,<code>page-break-after</code> 和 <code>page-break-inside</code> 属性可能出现在弹性容器,弹性子元素以及弹性子元素的内部元素上出现。</p>
<h2 id=".E6.B5.8F.E8.A7.88.E5.99.A8.E5.85.BC.E5.AE.B9.E6.80.A7">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<table class="compat-table">
  <tbody>
    <tr>
      <th>Feature</th>
      <th>Firefox (Gecko)</th>
      <th>Chrome</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>Basic support</td>
      <td>{{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br />
        {{ CompatGeckoDesktop("22.0") }}(Behind a pref) [2]</td>
      <td>21.0{{ property_prefix("-webkit") }}</td>
      <td>{{ CompatNo() }} [1]</td>
      <td>12.10</td>
      <td>{{ CompatNo() }} [1]</td>
    </tr>
  </tbody>
</table>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>Android</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br />
          {{ CompatGeckoMobile("22.0") }}(Behind a pref) [2]</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id=".E6.B3.A8.E6.84.8F">注意</h3>
<p>[1] IE10和Safati支持一种老的不兼容草案规范的版本。目前它们还没有升级到最终版本。(IE10支持一种新旧之间的过渡版本,Safari 6-、Android Browser和iOS 6-完全是老版本——译者注)</p>
<p>[2] Firefox 仅支持单线弹性盒子布局。要激活Firefox的支持功能,需要拥护手动改变about:config 的属性 "layout.css.flexbox.enabled" 为 <code>true</code>.</p>
<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd">
  &nbsp;</div>
<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd">
  &nbsp;</div>
<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd">
  &nbsp;</div>
Revert to this revision