Warning:
This wiki has been archived and is now read-only.
View source for Css3-flexbox

Jump to: navigation, search
You do not have permission to edit this page, for the following reason:
The action you have requested is limited to users in one of the groups: Users, 106.
You can view and copy the source of this page.
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/}}
{{hant ver|http://www.w3.org/html/ig/zh/wiki/css3-flexbox/zh-hant}}
{{hans ver|http://www.w3.org/html/ig/zh/wiki/css3-flexbox/zh-hans}}
== 介紹 ==
== {{anchor|box-model}}伸縮布局模型 ==
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#box-model}}

一個設有 ‘<code>display:flex</code>’ 或 ‘<code>display:inline-flex</code>’ 的元素是一個[[#flex-container|伸縮容器]]，伸縮容器的子元素被稱為為[[#flex-item|伸縮項目]]，這些子元素使用伸縮布局模型來排版。

與布局計算偏向使用書寫模式方向的塊布局與行內布局不同，伸縮布局偏向使用[[#flex-flow-property|伸縮流]]方向。為了讓描述伸縮布局變得更容易，本章節定義一系列相對於伸縮流的術語。‘[[#flex-flow|<code>flex-flow</code>]]’ 的值決定了這些術語如何對應到物理方向（頂／右／底／左）、物理軸（垂直／水平）、物理大小（寬度／高度）。

[[Image:flex-direction-terms.zh-hant.png|center]]

<small style="display: block; text-align: center;">'''圖 2.''' 一個 ‘[[#flex-flow-row|<code>row</code>]]’ 伸縮容器中各種方向與大小術語的示意圖。</small>

'''<span style="color: hsl(0,80%,40%);">主軸、主方向</span>'''

<div style="margin: 0 0 1em 2em;">使用者代理沿著一個伸縮容器的<b id="main-axis">主軸</b>配置[[#flex-item|伸縮項目]]，[[#main-axis|主軸]]是<b id="main-dimension">主方向</b>的延伸。</div>

'''<span style="color: hsl(240,80%,50%);">主始、主結</span>'''

<div style="margin: 0 0 1em 2em;">[[#flex-item|伸縮項目]]的配置從容器的<b id="main-start">主始</b>邊開始，往<b id="main-end">主結</b>邊結束。</div>

'''<span style="color: hsl(120,80%,30%);">主長度、主長度屬性</span>'''

<div style="margin: 0 0 1em 2em;">[[#flex-item|伸縮項目]]的在[[#main-dimension|主方向]]的寬度或高度就是項目的<b id="main-size">主長度</b>，[[#flex-item|伸縮項目]]的<b id="main-size-property">主長度屬性</b>是 ‘<code>width</code>’ 或 ‘<code>height</code>’ 屬性，由哪一個對著[[#main-dimension|主方向]]決定。</div>

'''<span style="color: hsl(0,80%,40%);">側軸、側方向</span>'''

<div style="margin: 0 0 1em 2em;">與[[#main-axis|主軸]]垂直的軸稱作<b id="cross-axis">側軸</b>，是<b id="cross-dimension">側方向</b>的延伸。</div>

'''<span style="color: hsl(240,80%,50%);">側始、側結</span>'''

<div style="margin: 0 0 1em 2em;">填滿項目的伸縮行的配置從容器的<b id="cross-start">側始</b>邊開始，往<b id="cross-end">側結</b>邊結束。</div>

'''<span style="color: hsl(120,80%,30%);">側長度、側長度屬性</span>'''

<div style="margin: 0 0 1em 2em;">[[#flex-item|伸縮項目]]的在[[#cross-dimension|側方向]]的寬度或高度就是項目的<b id="cross-size">側長度</b>，[[#flex-item|伸縮項目]]的<b id="cross-size-property">側長度屬性</b>是 ‘<code>width</code>’ 或 ‘<code>height</code>’ 屬性，由哪一個對著[[#cross-dimension|側方向]]決定。</div>

== {{anchor|flex-containers}}伸縮容器 ― ‘display’ 值 ‘[[#display-flex|<code>flex</code>]]’ 與 ‘[[#display-inline-flex|<code>inline-flex</code>]]’ ==
{| style="width: 100%; padding: 0.5em 1em; background: #DEF; border-left: 0.5em solid #8CCBF2;"
| style="width: 10%; border-bottom: 1px solid #BBD7E9;" | ''名稱：''
| style="border-bottom: 1px solid #BBD7E9;" | display
|-
| [[css3-values#value-defs|''新值：'']]
| [[#display-flex|'''flex''']] <span style="color: #CC2200;">&#x7c;</span> [[#display-inline-flex|'''inline-flex''']]
|}
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#flex-containers}}

'''‘<code id="display-flex">flex</code>’'''

<div style="margin: 0 0 1em 2em;">這個值讓元素產生塊級[[#flex-container|伸縮容器]]盒。</div>

'''‘<code id="display-inline-flex">inline-flex</code>’'''

<div style="margin: 0 0 1em 2em;">這個值讓元素產生行內級[[#flex-container|伸縮容器]]盒。</div>

<b id="flex-container">伸縮容器</b>會為其內容建立新的<b id="flexbox-formatting-context">伸縮格式化上下文</b>。除了使用伸縮排版而不塊排版以外，伸縮格式化上下文與塊格式化上下文根元素相同 ― 浮動不會闖入伸縮容器，且伸縮容器的邊界不與其內容的邊界折疊。

伸縮容器不是塊容器，因此有些設計用來控制塊布局的屬性在伸縮布局中不適用。特別是：

* 多欄模組的所有 ‘<code>column-*</code>’ 屬性在伸縮容器上沒有作用。
* ‘<code>float</code>’ 與 ‘<code>clear</code>’ 在[[#flex-item|伸縮項目]]上沒有作用。
* ‘<code>vertical-align</code>’ 在[[#flex-item|伸縮項目]]上沒有作用。

若元素 ‘<code>display</code>’ 的指定值是 ‘[[#display-inline-flex|<code>inline-flex</code>]]’ 且元素是一個浮動或絕對定位元素，則 ‘<code>display</code>’ 的計算值是 ‘[[#display-flex|<code>flex</code>]]’。也就是 [[CSS2#dis-pos-flo|CSS 2.1 章節 9.7]] 的表格增修「指定值」是 ‘[[#display-inline-flex|<code>inline-flex</code>]]’、「計算值」是 ‘[[#display-flex|<code>flex</code>]]’ 的一行。

== {{anchor|flex-items}}伸縮項目 ==
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#flex-items}}

一個[[#flex-container|伸縮容器]]的內容具有零個以上的<b id="flex-item">伸縮項目</b> ― 伸縮容器的每一個子元素（除了需要盒修復的元素之外）{{extra note||原文只講 'child' 而已，不知道是 'child box' 還是 'child element'。}}都會成為一個[[#flex-item|伸縮項目]]，且使用者代理會將任何直接在伸縮容器裡的連續文字塊包起來成無名[[#flex-item|伸縮項目]]。然而，若無名[[#flex-item|伸縮項目]]僅包含空白，則使用者代理不會渲染該伸縮項目，如同將之視為 ‘<code>display: none</code>’。

[[#flex-item|伸縮項目]]為其內容建立一個新的格式化上下文，這個格式化上下文的種類由項目 ‘<code>display</code>’ 的值決定。使用者代理使用 [[CSS2#dis-pos-flo|CSS 2.1 章節 9.7]] 的表格決定[[#flex-item|伸縮項目]] ‘<code>display</code>’ 的計算值。

{{note|CSS 工作組預計會在未來的規範裡為伸縮項目的新的 ‘<code>display</code>’ 值，以取代這條敘述。}}

{{codesample|'''範例二'''

伸縮項目範例：

 <nowiki><div style="display: flex">

    <!-- 伸縮項目：塊級子元素 -->
    <div id="item1">塊</div>

    <!-- 伸縮項目：浮動元素 ― 使用者代理會忽略浮動 -->
    <div id="item2" style="float: left;">浮動</div>

    <!-- 伸縮項目：包著行內內容的無名塊盒 -->
    無名項目 3

    <!-- 伸縮項目：行內子元素 -->
    <div id="item4">span</div>

    <!-- 伸縮項目：<span> 變成 'display: block'，所以沒有行內塊現象。-->
    <span>
        項目 5
        <div id=not-an-item>項目 5</div>
        項目 5
    </span>
</div></nowiki>
}}

有些 ‘<code>display</code>’ 會觸發無名盒的生成，舉例來說，使用者代理會在單獨的 ‘<code>table-cell</code>’ 盒[[CSS2#anonymous-boxes|周圍生成 ‘<code>table</code>’ 與 ‘<code>table-row</code>’ 元素]]。[[HTML5/references#refsCSS|[CSS21]]] 這種修復必須在伸縮容器的子元素變成[[#flex-item|伸縮項目]]「之前」發生 ― 舉例來說，若有兩個相鄰的 ‘<code>display: table-cell</code>’ 子元素，兩個元素周圍的無名表格包裹盒會變成[[#flex-item|伸縮項目]]。

{{note|本規範預期讓未來生成無名容器（如 ‘<code>display:ruby</code>’）或會攪動盒樹（‘<code>display:run-in</code>’）的顯示型態造成的變化在決定伸縮項目之前發生。}}

=== 伸縮項目的邊界 ===
相鄰[[#flex-item|伸縮項目]]的邊界不折疊。[[#auto-margins|‘<code>auto</code>’ 邊界]]吸收在該方向多餘的空間，因此可以用來對齊或是將相鄰的伸縮項目隔開 ― 參見[[#auto-margins|《用 ‘<code>auto</code>’ 邊界對齊》]]。

=== 伸缩项目的绘制 ===
对于一个[[#flex-item|伸缩项目]]，就算「<code>position</code>」是「<code>static</code>」，不是「<code>auto</code>」的「[http://www.w3.org/html/ig/zh/wiki/CSS2/visuren#propdef-z-index <code>z-index</code>]」值也会创建一个堆叠上下文。除此之外，[[#flex-item|伸缩项目]]的绘制与常规流中的块级元素无异。

{{note|注：一个伸缩项目的子嗣元素，就算定位在伸缩元素之外，仍参与伸缩项目建立的堆叠上下文。}}

=== 流外項目 ===
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#abspos-flexbox-items}}

伸縮容器的絕對定位子元素不是[[#flex-item|伸縮項目]]，但是這些子元素在原本盒子樹的常規位置留下了「佔位符」。這些佔位符是寬、高、行高皆為 ‘<code>0</code>’ 的無名行內盒，且佔位符會成為伸縮項目。

伸縮容器絕對定位子元素的靜止位置（當 ‘<code>top</code>’ /‘<code>right</code>’/‘<code>bottom</code>’/‘<code>left</code>’ 屬性為 ‘<code>auto</code>’ 時的位置）是對應的佔位符在使用者代理進行伸縮布局之後的最後位置。

{{note|在大部分情況下，上面敘述說明了絕對定位子元素對伸縮布局沒有影響，但是當伸縮容器設有 ‘<code>justify-content: space-between</code>’ 或 ‘<code>justify-content: space-around</code>’  的時候則是例外，在這種情況下包著佔位符的無名伸縮項目會產生兩個間隔空間（沒有這個無名項目的話只有一個），會造成兩個「真」項目中間有兩倍寬的間隔。}}

=== 折疊項目 ===
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#visibility-collapse}}

在伸縮項目上設定 ‘<code>visibility: collapse</code>’ 會讓項目變成<b id="collapsed-flex-item">折疊伸縮項目</b>，效果與表格欄或是表格列上的 ‘<code>visibility: collapse</code>’ 類似 ― 使用者代理不會渲染折疊元素，但是項目會留下一個「支撐」使得伸縮行的側長度維持穩定。因此，若伸縮容器只有一行伸縮行，動態折疊項目或取消折疊不會對伸縮容器的[[#cross-size|側長度]]造成影響，也不會造成其他頁面配置「搖晃」。但是，在折疊項目之後使用者代理「會」重做伸縮行斷行，所以具有多個伸縮行的伸縮容器的側長度可能會變。

雖然使用者代理不渲染折疊伸縮項目，這些項目還是會出現在[http://www.w3.org/TR/CSS21/intro.html#formatting-structure 格式化結構]中，因此與 ‘<code>display: none</code>’ 項目不同 [[HTML5/references#refsCSS|[CSS21]]]，只靠元素出現在格式化結構就有的效果（如遞增計數器或是運行動畫、轉場）在折疊項目上仍然有效。

為了計算「支撐」的尺寸，使用者代理先假設項目未折疊並進行伸縮布局，然後將折疊項目用具有原來項目所在的伸縮行的側長度的「支撐」替換並重新進行伸縮布局。[[#layout-algorithm|《伸縮布局演算法》]]有 ‘<code>visibility: collapse</code>’ 如何與伸縮布局互動的規範性敘述。

{{note|請注意在任何伸縮項目上使用 ‘<code>visibility: collpase</code>’ 會讓使用者代理執行伸縮布局演算法的時候重複最費時的幾個步驟。若項目不會需要動態折疊、取消折疊，本規範建議網頁作者繼續使用 ‘<code>display: none</code>’ 來隱藏項目，因為對於布局引擎來說這樣比較有效率。}}

=== {{anchor|min-size-auto}}伸縮項目的預設最小長度 ===
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#min-size-auto}}

為了讓伸縮項目有合理的最小長度，本規範為 CSS 2.1 定義的 ‘<code>min-width</code>’ 與 ‘<code>min-height</code>’ 屬性增加一個新的值 ‘[[#min-auto|<code>auto</code>]]’ 作為這些元素的初始值。[[HTML5/references#refsCSS|[CSS21]]]

{| style="width: 100%; padding: 0.5em 1em; background: #DEF; border-left: 0.5em solid #8CCBF2;"
| style="width: 10%; border-bottom: 1px solid #BBD7E9;" | ''名稱：''
| style="border-bottom: 1px solid #BBD7E9;" | min-width, min-height
|-
| style="border-bottom: 1px solid #BBD7E9;" |[[css3-values#value-defs|''新值：'']]
| style="border-bottom: 1px solid #BBD7E9;" | auto
|- 
| style="border-bottom: 1px solid #BBD7E9;" | ''新初始值：''
| style="border-bottom: 1px solid #BBD7E9;" | [[#min-auto|'''auto''']]
|-
| ''新計算值：''
| 指定的百分比率或絕對長度或關鍵字
|}

'''‘<code id="min-auto">auto</code>’'''

<div style="margin: 0 0 1em 2em;">當使用在伸縮項目的最小主長度屬性的時候，本關鍵字代表最小主長度是最小內容長度。

{{note|CSS 工作組預計在定義 ‘<code>min-content</code>’ 關驗字（[http://www.w3.org/TR/css3-writing-modes/#intrinsic-sizing 書寫模式附錄 D]）的規範足夠成熟時，在這種情況讓 ‘[[#min-auto|<code>auto</code>]]’ 計算為 ‘<code>min-content</code>’。}}

否則，（除非一個的未來規範描述別的行為）本關鍵字計算為 ‘<code>0</code>’。</div>

== {{anchor|ordering-and-orientation}}排序與方向 ==
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#ordering-and-orientation}}

伸縮容器的內容可以用任何方向與任何順序進行布局，這讓網頁作者輕鬆地達到之前需要複雜、不牢靠的 ‘<code>float</code>’ 與 ‘<code>clear</code>’ 屬性才可以實現的效果。這個功能透過 ‘[[#flex-direction|<code>flex-direction</code>]]’、‘[[#flex-wrap|<code>flex-wrap</code>]]’ 與 ‘[[#order|<code>order</code>]]’ 屬性呈現。

=== 伸縮流的方向 ― ‘[[#flex-direction|<code>flex-direction</code>]]’ 屬性 ===
{{property|<b id{{=}}"flex-direction">flex-direction</b> | row <span style{{=}}"color: #CC2200;">{{!}}</span> row-reverse <span style{{=}}"color: #CC2200;">{{!}}</span> column <span style{{=}}"color: #CC2200;">{{!}}</span> column-reverse | row | 伸縮容器 | 否 | （不適用） | 視覺 | 同指定值 | 否}}
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#flex-direction-property}}

‘[[#flex-direction|<code>flex-direction</code>]]’ 屬性可以用來設定伸縮容器的[[#main-axis|主軸]]的方向，這也決定了使用者代理配置[[#flex-item|伸縮項目]]的方向。

'''‘<code id="flex-flow-row">row</code>’'''

<div style="margin: 0 0 1em 2em;">伸縮容器的[[#main-axis|主軸]]與當前[http://www.w3.org/TR/css3-writing-modes/#writing-mode 書寫模式]的行內軸（文字布局的主要方向）同向。[[#main-start|主始]]與[[#main-end|主結]]方向分別等同於當前[http://dev.w3.org/csswg/css3-writing-modes/#writing-mode 書寫模式]的[http://dev.w3.org/csswg/css3-writing-modes/#start 始]與[http://dev.w3.org/csswg/css3-writing-modes/#end 結]方向。</div>

'''‘<code>row-reverse</code>’'''

<div style="margin: 0 0 1em 2em;">除了[[#main-start|主始]]與[[#main-end|主結]]方向交換以外同 ‘[[#flex-flow-row|<code>row</code>]]’。</div>

'''‘<code id="flex-flow-column">column</code>’'''

<div style="margin: 0 0 1em 2em;">伸縮容器的[[#main-axis|主軸]]與當前[http://www.w3.org/TR/css3-writing-modes/#writing-mode 書寫模式]的塊軸（塊布局的主要方向）同向。[[#main-start|主始]]與[[#main-end|主結]]方向分別等同於當前[http://dev.w3.org/csswg/css3-writing-modes/#writing-mode 書寫模式]的[http://dev.w3.org/csswg/css3-writing-modes/#start 前]與[http://dev.w3.org/csswg/css3-writing-modes/#end 後]方向。</div>

'''‘<code>column-reverse</code>’'''

<div style="margin: 0 0 1em 2em;">除了[[#main-start|主始]]與[[#main-end|主結]]方向交換以外同 ‘[[#flex-flow-column|<code>column</code>]]’。</div>

=== 伸縮行換行 ― ‘[[#flex-wrap|<code>flex-wrap</code>]]’ 屬性 ===
{{property|<b id{{=}}"flex-wrap">flex-wrap</b> | nowrap <span style{{=}}"color: #CC2200;">{{!}}</span> wrap <span style{{=}}"color: #CC2200;">{{!}}</span> wrap-reverse | nowrap | 伸縮容器 | 否 | （不適用） | 視覺 | 同指定值 | 否}}
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#flex-wrap-property}}

‘[[#flex-wrap|<code>flex-wrap</code>]]’ 屬性控制伸縮容器是[[#single-line|單行]]還是[[#multi-line|多行]]並控制側軸的指向，這決定
了新的一行堆放的方向。

'''‘<code>nowrap</code>’'''

<div style="margin: 0 0 1em 2em;">伸縮容器為[[#single-line|單行]]。[[#cross-start|側始]]方向等同於當前[http://dev.w3.org/csswg/css3-writing-modes/#writing-mode 書寫模式]的[http://dev.w3.org/csswg/css3-writing-modes/#start 始]或[http://dev.w3.org/csswg/css3-writing-modes/#before 前]在[[#cross-axis|側軸]]的那一邊，而[[#cross-end|側結]]方向是[[#cross-start|側始]]的相反方向。</div>

'''‘<code id="flex-wrap-wrap">wrap</code>’'''

<div style="margin: 0 0 1em 2em;">伸縮容器為[[#multi-line|多行]]。[[#cross-start|側始]]方向等同於當前[http://dev.w3.org/csswg/css3-writing-modes/#writing-mode 書寫模式]的[http://dev.w3.org/csswg/css3-writing-modes/#start 始]或[http://dev.w3.org/csswg/css3-writing-modes/#before 前]在[[#cross-axis|側軸]]的那一邊，而[[#cross-end|側結]]方向是[[#cross-start|側始]]的相反方向。</div>

'''‘<code>wrap-reverse</code>’'''

<div style="margin: 0 0 1em 2em;">除了[[#cross-start|側始]]與[[#cross-end|側結]]方向交換以外同 ‘[[#flex-wrap-wrap|<code>wrap</code>]]’。</div>

=== {{anchor|flex-flow-property}}伸縮方向與換行 ― ‘[[#flex-flow|<code>flex-flow</code>]]’ 縮寫 ===
{{property|<b id{{=}}"flex-flow">flex-flow</b> | <‘[[#flex-direction|<code>flex-direction</code>]]’> <span style{{=}}"color: #CC2200;">&#x7c;&#x7c;</span> <‘[[#flex-wrap|<code>flex-wrap</code>]]’> | 參見各屬性  | 伸縮容器 | 參見各屬性  | （不適用） | 視覺 | 參見各屬性 | 否}}
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#flex-flow-property}}

‘[[#flex-flow|<code>flex-flow</code>]]’ 屬性是同時設定 ‘[[#flex-direction|<code>flex-direction</code>]]’ 與 ‘[[#flex-wrap|<code>flex-wrap</code>]]’ 屬性的縮寫，兩個屬性決定了伸縮容器的主軸與側軸。

{{codesample|'''範例五'''

一些合法伸縮流的例子：

<div style{{=}}"width: 60%; overflow:hidden;">
[[Image:flex-flow1.png|right]]

 div { flex-flow: row; }
 /* 初始值。主軸是行內方向，
    沒有換行。 */
</div>

<div style{{=}}"width: 60%; overflow:hidden;">
[[Image:flex-flow2.png|right]]

 div { flex-flow: column wrap; }
 /* 主軸是塊的方向，換行往行
    內方向。在英文頁面裡，主
    軸是上往下，往右換行。 */
</div>

<div style{{=}}"width: 60%; overflow:hidden;">
[[Image:flex-flow3.png|right]]

 div { flex-flow: row-reverse wrap-reverse; }
 /* 主軸與行內方向相反（右到左）。
    新行換行向上。 */
</div>
}}

{{note|請注意 ‘[[#flex-flow|<code>flex-flow</code>]]’ 決定的方向取決於書寫模式。舉例來說，在日文豎排裡，‘[[#flex-flow-row|<code>row</code>]]’ 伸縮容器從上到下配置其內容。}}

=== 顯示順序 ― ‘[[#order|<code>order</code>]]’ 屬性 ===
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#order-property}}

預設狀態下，使用者代理會用[[#flex-item|伸縮項目]]出現在來源文件的次序配置這些伸縮項目。‘[[#order|<code>order</code>]]’ 屬性可以用來改變這個順序。

{{property|<b id{{=}}"order">order</b> | ''<number>'' | 0 | 伸縮項目與伸縮容器的絕對定位子元素 | 否 | （不適用） | 視覺 | 同指定值 | 是}}

‘[[#order|<code>order</code>]]’ 屬性透過將元素分到有序號的組以控制元素出現的順序。在伸縮布局中，‘[[#order|<code>order</code>]]’ 屬性控制[[#flex-item|伸縮項目]]在伸縮容器裡的順序。

伸縮容器會從序號最小的組開始布局，在同一個組裡的項目依在來源文件裡的次序布局，這也影響了[http://www.w3.org/TR/CSS2/zindex.html 著畫次序] [[HTML5/references#refsCSS|[CSS21]]]，正如同在文件中元素已經改變次序一般。

‘[[#order|<code>order</code>]]’ 屬性必不可影響非視覺媒介（像是[http://dev.w3.org/csswg/css3-speech/ 語音]）裡的次序。<span style="color: green; margin: 1em;">這讓網頁作者可以用具有邏輯次序的內容滿足線性呈現內容的非視覺媒介與非 CSS 使用者代理，同時用 ‘[[#order|<code>order</code>]]’ 重新排列內容的視覺順序。</span>

{{codesample|'''範例四'''

下圖的簡單標籤介面中，一個使用中的模板總是顯示在最前面：

{{figure|http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/images/flex-order-example.png}}

這可以由以下 CSS 實作（僅顯示部份相關程式碼）：

 .tabs {
 	display: flex;
 }
 .tabs > .current {
 	order: -1; /* 比喻設值 0 要小 */
 }
}}

除非有別的規範說明，本屬性在不是[[#flex-item|伸縮項目]]或伸縮容器的絕對定位子元素{{extra note||原文陋提了絕對定位子元素}}的元素上沒有效果。

{{codesample|'''範例五'''

很多 Web 頁面在 HTML 裡有很相似的構造，在上面有一個標題，下面一個註解，一個內容區塊跟一個或兩個在中間的額外欄位。一般來說，內容出現在頁面原始碼的前面（在額外的欄位之前）比較好。然而，這讓很多一般的設計很難達成，像是把欄位擺在內容區塊的兩邊。多年以來這種俗稱「聖杯布局」的兩個額外欄位的布局已經有很多種方法完成了，然而 ‘[[#order|<code>order</code>]]’ 讓這種布局輕而易舉。以下面的頁面程式碼草圖與預期布局為例：

<div style{{=}}"width: 70%; overflow: hidden;">
[[Image:flex-order-page.png|right]]

<pre><!DOCTYPE html>
<header>...</header>
<div id='main'>
   <article>...</article>
   <nav>...</nav>
   <aside>...</aside>
</div>
<footer>...</footer></pre>
</div>

這種布局可以很簡單地由伸縮布局達成：

 #main { display: flex; }
 #main > article { flex:1;         order: 2; }
 #main > nav     { width: 200px;   order: 1; }
 #main > aside   { width: 200px;   order: 3; }

更棒的是，預設下這些欄位是[[#align-items-stretch|等高]]的，而且主要內容會根據螢幕大小盡可能寬。另外，也可以跟媒體查詢結合，在窄螢幕的狀況下使用垂直布局：

 @media all and (max-width: 600px) {
 	/* 要放三個欄位太窄了 */
 	#main { flex-flow: column; }
 	#main > article, #main > nav, #main > aside {
 		/* 回到文件順序 */
 		order: 0; width: auto;
 	}
 }

<small>（用多行伸縮容器實現智慧換行就當作是給讀者的習題。）</small>}}

{{note|CSS 工作組預計在未來的布局模式（如格線布局）中也讓 ‘[[#order|<code>order</code>]]’ 有類似的效果。}}

== 伸縮行 ==
伸缩盒容器可以是单行的，也可以是多行的，这由'flex-wrap'属性决定：

* 单行的伸缩盒容器会将其所有子元素在单独的一行上进行布局，即便这可能导致内容溢出。
* 多行的伸缩盒窗口会将其伸缩盒项目放置在多行上，这类似于文本的排列，当文本过宽导致一行无法容纳时，会断开并移至新的一行。当创建一个新的行时，这些行会根据'flex-wrap'属性，在辅轴上进行堆叠。每一行至少包含一个伸缩项目，除非伸缩盒容器本身是空的。

<pre><code>示例7

该示例展示4个按钮，但并不水平排列。

<style>
#flexbox {
    display: flex;
    flex-flow: row wrap;
    width: 300px;
}
.item {
    width: 80px;
}
<style>

<div id="flexbox">
    <div class='item'>1</div>
    <div class='item'>2</div>
    <div class='item'>3</div>
    <div class='item'>4</div>
</div>

由于容器的宽度是300px，仅能支持3个项目在同一行上。这3个项目占用了240px，剩余60px的空间。由于'flex-wrap'属性指定了一个多行的伸缩盒容器（因为使用了'wrap'关键字），伸缩盒容器会多创建一个行来放置最后一个项目。

[图]

图4：多行伸缩盒容器的渲染示例</code></pre>

当内容被分布到多行时，每一行独立地进行布局。可伸缩长度以及'justify-content'和'align-self'属性每次仅作用于单独一行上的项目。

当一个伸缩盒容器有多行时，每一行的辅轴长度指定为可容纳该行中的伸缩盒项目（在依据'align-self'属性进行对齐之后）的最小值，并且这些行依据'align-content'属性在伸缩盒容器中进行对齐。当一个伸缩盒容器只有一行（即使是一个多行的伸缩盒容器）时，这一行的辅轴长度为伸缩盒容器的辅轴长度，同时'align-content'属性无效。行的主轴长度始终和伸缩盒容器的主轴长度相同。

<pre><code>示例8

这一示例与上一示例相同，唯一的区别是伸缩盒项目拥有'flex: auto'样式。第一行剩余60px的空间，且所有项目有相同的可伸缩性，因此这一行上的3个项目均获得20px的额外宽度，变为100px宽。剩余的一个项目放置在其独立的行中，因此会扩展至整个度，即300px。

[图]

图5：与上一示例相同，但使用'flex: auto'样式</code></pre>


== 伸縮性 ― ‘[[#flex|flex]]’ 屬性 ==
=== '[[#flex|flex]]'缩写 ===
{{property|<b id{{=}}"flex">flex</b> | none <span style{{=}}"color: #CC2200;">{{!}} [</span> <'flex-grow'> <'flex-shrink'><span style{{=}}"color: #CC2200;">? &#x7c;&#x7c;</span> <'flex-basis'> <span style{{=}}"color: #CC2200;">]</span> | 独立参考每个属性 | 伸缩盒项目 | 独立参考每个属性 | （不適用） | 视觉媒体 | 独立参考每个属性 | 独立参考每个属性}}
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#flex-property}}

'[[#flex|flex]]'属性指定<b id="flexible-length">可伸缩长度</b>的部件：[[#flex-grow-ratio|扩展比率]]和[[#flex-shrink-ratio|收缩比率]]，以及[[#flex-basis|伸缩基准值]]。当一个元素是[[#flex-item|伸缩盒项目]]时，'[[#flex|flex]]'属性将作为计算值，用于决定元素的[[#main-size|主尺寸]]，代替其[[#main-size-property|主尺寸属性]]。如果元素不是[[#flex-item|伸缩盒项目]]，则'[[#flex|flex]]'属性无效。

<'flex-basis'>组件用于设置<b id="flex-basis">伸缩基准值</b>，在根据可伸缩比率计算出剩余空间的分布之前，其初始值为[[#flex-item|伸缩盒项目]]的[[#main-size|主尺寸]]。如果该值被省略，则其[[#flex-basis|伸缩基准值]]默认为'0%'。<span style="color: green; margin: 1em;">注意该值与[[#flex-basis|伸缩基准值]]的初始值不同，其初始值为'auto'。</span>当<'flex-basis'>的值为0时，必须指定一个单位。无单位的0值可以被解析为一个可伸缩比率，也可以导致该声明无效。

<'flex-grow'>和<'flex-shrink'>组件设置<b id="flex-grow-ratio">扩展比率</b>和<b id="flex-shrink-ratio">收缩比率</B>，当根据可伸缩容器中的其它[[#flex-item|伸缩盒项目]]分配了剩余空间后，这两个组件可用于计算该[[#flex-item|伸缩盒项目]]可扩展或收缩的大小。如果该值被省略，其值被设置为1。注意该值与'[http://dev.w3.org/csswg/css3-flexbox/#flex-grow flex-grow]'的初始值不同，其初始值为'0'。

關鍵字 ‘<code>none</code>’ 的計算值為 ‘<code>0 0 auto</code>’。

[[Image:rel-vs-abs-flex.zh-hant.png|center]]

<small style="display: block; text-align: center;">'''圖 6.''' 一個顯示「絕對」伸縮（以零為基準值開始）與「相對」伸縮（以項目的內容大小為基準值開始）差異的圖解。</small>

=== [[#flex|flex]]属性的常见值 ===

本章节不具备规范意义。

下表总结了[[#flex|flex]]属性常见值的效果：

'''‘<code>flex: initial</code>’'''

<div style="margin: 0 0 1em 2em;">与'flex: 0 1 auto'相同。该值根据'width/height'属性设置元素的尺寸，当剩余空间为正值时，元素无法伸缩，但当空间不足时，元素可收缩至其[http://dev.w3.org/csswg/css3-flexbox/#min-size-auto minimum]值（如果用于[[#flex-basis|伸缩基准值]]的'width/height'属性值为'auto'，则会根据其内容来决定元素尺寸）。对齐相关的属性以及值为'auto'的margin属性可用于控制伸缩盒容器中的伸缩盒项目的对齐。</div>

'''‘<code>flex: auto</code>’'''

<div style="margin: 0 0 1em 2em;">与'flex: 1 1 auto'相同。该值使元素可伸缩，并根据'width/height'属性设置其[[#flex-basis|伸缩基准值]]。如果所有项目均属于'flex: auto'或'flex: none'，则在项目尺寸决定后，剩余空间会被平分给'flex: auto'的项目。</div>

'''‘<code>flex: none</code>’'''

<div style="margin: 0 0 1em 2em;">与'flex: 0 0 auto'相同。该值使元素不可伸缩，并根据'width/height'属性决定其尺寸。元素以一般算法决定尺寸，但依旧可以使用可伸缩布局的[[#alignment|对齐功能]]，可以将所有项目设置为'flex: none'并使用值为'auto'的margin属性或使用对齐相关属性。其效果与'initial'类似，但即使在空间溢出的情况下，可伸缩盒项目也不能收缩。</div>

'''‘<code>flex: <正数></code>’'''

<div style="margin: 0 0 1em 2em;">与'flex: <正数> 1 0%'相同。该值使元素可伸缩，并将[[#flex-basis|伸缩基准值]]设置为0，导致该项目会根据设置的比率占用可伸缩盒容器的剩余空间。如果一个可伸缩盒容器里的所有项目都使用此模式，则它们的尺寸会根据可伸缩比率进行设置。</div>

{{codesample|'''例7：'''

可伸缩性允许元素直接占用可用空间，同时可选地根据其内容来决定大小：

<pre><!DOCTYPE html>
<style>
    div { display:flex; outline:1px solid silver; }
    p { flex:auto; margin:1em; background:gold; }
</style>
<div>
    <p>"flexing"</p>
    <p>allows the items to get bigger</p>
    <p>or</p>
    <p>smaller</p>
</div></pre>

在此例中，四个段落的[[#flex-basis|伸缩基准值]]均是他们包含的文字的长度。而因为它们的[[#flex-grow-ratio|扩展比率]]均被设置为'1'，剩下的空间（从可伸缩盒容器的宽度中减去四个段落的伸缩基准值以及边距）将被平分给四个段落。下图显示了当伸缩基准值汪同时，拥有相同的可伸缩性的元素，最终依旧可能有不同的尺寸。

http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/images/wp7zxxyu.gif
}}

在默认情况下，可伸缩盒项目不会收缩至比它们的最小内容尺寸（其中最长的单词的长度，或固定尺寸的元素）更小。如果需要改变这一行为，可设置'min-width'或'min-height'属性。

== {{anchor|alignment}}對齊 ==
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#alignment}}

在一个可伸缩容器的内容完成伸缩，且所有可伸缩项的大小确定后，它们可以在可伸缩容器中进行对齐。

'margin'属性可以用来对齐这些项，这类似于在块布局的行为，但要更加强大。[[#flex-item|伸缩盒项目]]同时也识别[http://dev.w3.org/csswg/css3-align/ 盒对齐]标准中的对齐相关的属性，这些属性可用于简单地使用基于关键字的对齐方式，且在[[#main-axis|主轴]]和[[#cross-axis|辅轴]]上均可使用。这些属性创造了很多常见的对齐方式，包括一些在CSS 2.1中很难实现的布局，比如水平和垂直居中。

{{note|由于对齐相关的属性是在盒对齐标准中定义的，可伸缩盒则重新定义了相关属性，以避免两个标准间产生规范依赖从而减缓本标准的进步速度。在盒对齐标准完成并定义这些属性用于其他类型的布局模式时的效果前，本标准定义的这些属性将只用于可伸缩盒。}}

=== {{anchor|auto-margins}}用 ‘<code>auto</code>’ 邊界對齊 ===
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#auto-margins}}

本章节不具规范意义。具有规范意义的边距对可伸缩项的影响方式在[[#layout-algorithm|可伸缩盒布局算法]]一章中定义。

在可伸缩项目上，以'auto'为值的边距，非常类似于普通流中的自动边距。

* 在计算伸缩基准值和伸缩长度时，自动边距相当于'0'。
* 在使用'[[#justify-content|justify-content]]'和'[http://dev.w3.org/csswg/css3-flexbox/#align-self align-self]'控制对齐前，所有正值的空间会在对应维度上被自动的边距平均分配。
* 在溢出的元素上，基于边距的对齐没有作用。

{{note|需要注意的是，如果空间被自动的边距平均分配了，则对齐相关的属性在这一维度上没有作用，因为边距偷走了伸缩后所有可用的空白空间。}}

{{codesample|'''例10：'''

一种比较常见的使用auto作为margin属性的值的场景是，将可伸缩项分为多个独立的“组”。以下示例展示了使用这一方案来实现一个常用的UI模式--一个包含多个动作按钮的横条，其中一部分在左边，另一部分在右边。

<small style{{=}}"display: block; text-align: center;">图7 Sample rendering of the code below.</small>

<ul id{{=}}"auto-bar" style{{=}}"overflow: hidden; padding: .25em 1em; background: #ddd; list-style: none; margin: 0; border-radius: .3em;">
  <li style{{=}}"float: left; margin: 0;"><span style{{=}}"display: inline-block; padding: 0 .25em; border-radius: .3em;">About</span><span style{{=}}"white-space: pre;"> {{!}}  </span></li>
  <li style{{=}}"float: left; margin: 0;"><span style{{=}}"display: inline-block; padding: 0 .25em; border-radius: .3em;">Projects</span><span style{{=}}"white-space: pre;"> {{!}}  </span></li>
  <li style{{=}}"float: left; margin: 0;"><span style{{=}}"display: inline-block; padding: 0 .25em; border-radius: .3em;">Interact</span></li>
  <li id{{=}}"login" style{{=}}"float: right; margin: 0;"><span style{{=}}"display: inline-block; padding: 0 .25em; border-radius: .3em;">Login</span></li>
</ul>

 <nowiki><style>
nav > ul {
	display: flex;
}
nav > ul > #login {
	margin-left: auto;
}
</style>
<nav>
	<ul>
		<li><a href=/about>About</a>
		<li><a href=/projects>Projects</a>
		<li><a href=/interact>Interact</a>
		<li id='login'><a href=/login>Login</a>
	</ul>
</nav></nowiki>
}}

{{codesample|'''救命11：'''

下图展示了在有溢出的情况下，使用'auto'值作为margin，以及使用[http://dev.w3.org/csswg/css3-flexbox/#align-items-property 对齐相关属性]控制跨轴的对齐时的差异。

<div style{{=}}"display:table; margin: 0 auto 1em;">
     <div class{{=}}cross-auto-figure
      style{{=}}"display:table-cell; padding-right: 50px;">
      <div style{{=}}"margin: 0 auto; width: 70px; background: #888; padding: 0 .5em; border-radius: 1em; border: 1px solid transparent;">
       <div style{{=}}"border-spacing: 0; display: table; background: #ddd; color: black; text-align: center; margin: .5em auto; padding: .5em; border-radius: .5em;">About</div>

       <div style{{=}}"border-spacing: 0; display: table; background: #ddd; color: black; text-align: center; margin: .5em auto; padding: .5em; border-radius: .5em;">Authoritarianism</div>

       <div style{{=}}"border-spacing: 0; display: table; background: #ddd; color: black; text-align: center; margin: .5em auto; padding: .5em; border-radius: .5em;">Blog</div>
      </div>
     </div>

     <div class{{=}}cross-auto-figure
      style{{=}}"display:table-cell; padding-left: 50px;">
      <div style{{=}}"margin: 0 auto; width: 70px; background: #888; padding: 0 .5em; border-radius: 1em; border: 1px solid transparent;">
       <div style{{=}}"border-spacing: 0; display: table; background: #ddd; color: black; text-align: center; margin: .5em auto; padding: .5em; border-radius: .5em;">About</div>

       <div style{{=}}"border-spacing: 0; display: table; background: #ddd; color: black; text-align: center; margin: .5em auto; padding: .5em; border-radius: .5em; margin-left: -31px;">Authoritarianism</div>

       <div style{{=}}"border-spacing: 0; display: table; background: #ddd; color: black; text-align: center; margin: .5em auto; padding: .5em; border-radius: .5em;">Blog</div>
      </div>
     </div>
</div>

<small style{{=}}"display: block; text-align: center;">图8 左图中的元素使用边距进行居中，而右图的则使用'[http://dev.w3.org/csswg/css3-flexbox/#align-self align-self]'进行居中。如果该列放在页面的左边，则边距的行为会更符合预期，因为那个较长的元素将保持完全可读。在其他情况下，真正的居中行为会产生更好的效果。</small>
}}

=== 主軸對齊 ― ‘[http://dev.w3.org/csswg/css3-flexbox/#justify-content <code>justify-content</code>]’ 屬性 ===
{{property|<b id{{=}}"justify-content">justify-content</b> | flex-start <span style{{=}}"color: #CC2200;">{{!}}</span> flex-end <span style{{=}}"color: #CC2200;">{{!}}</span> center <span style{{=}}"color: #CC2200;">{{!}}</span> space-between <span style{{=}}"color: #CC2200;">{{!}}</span> space-around | flex-start | 可伸缩盒容器 | 否 | （不適用） | 视觉媒体 | 指定值 | 否 }}
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#justify-content-property}}

'[[#justify-content|justify-content]]'属性用于在[[#main-axis|主轴]]上对齐[[#flex-item|伸缩盒项目]]。这一行为会在所有可伸缩长度及所有[[#auto-margins|自动边距]]均被解释后进行。通常情况下，当一行上的所有[[#flex-item|伸缩盒项目]]都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上施加一些控制。

'''<b id="justify-content-flex-start">flex-start</b>'''

<div style="margin: 0 0 1em 2em;">[[#flex-item|伸缩盒项目]]将向行起始位置收束。该行的第一个[[#flex-item|伸缩盒项目]]的[[#main-start|主起始位置]]的边距边界将与该行的[[#main-start|主起始位置]]的边界对齐，同时所有后续的[[#flex-item|伸缩盒项目]]与其前一个项目对齐。</div>

'''<b id="justify-content-flex-end">flex-end</b>'''

<div style="margin: 0 0 1em 2em;">[[#flex-item|伸缩盒项目]]将向行结束位置收束。该行的第一个[[#flex-item|伸缩盒项目]]的[[#main-end|主结束位置]]的边距边界将与该行的[[#main-end|主结束位置]]的边界对齐，同时所有后续的[[#flex-item|伸缩盒项目]]与其前一个项目对齐。</div>

'''<b id="justify-content-center">center</b>'''

<div style="margin: 0 0 1em 2em;">[[#flex-item|伸缩盒项目]]将向行的中间位置收束。该行的[[#flex-item|伸缩盒项目]]将相互对齐并在行中居中对齐，同时第一个元素与行的[[#main-start|主起始位置]]的边距等同与最后一个元素与行的[[#main-end|主结束位置]]的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。</div>

'''<b id="justify-content-space-between">space-between</b>'''

<div style="margin: 0 0 1em 2em;">[[#flex-item|伸缩盒项目]]会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个[[#flex-item|伸缩盒项目]]，则该值等效于'[[#justify-content-flex-start|flex-start]]'。在其它情况下，第一个元素的边距边界与行的[[#main-start|主起始位置]]的边界对齐，同时最后一个元素的边距边界与行的[[#main-end|主结束位置]]的边距对齐，而剩余的[[#flex-item|伸缩盒项目]]则平均分布，并确保两两之间的空白空间相等。</div>

'''<b id="justify-content-space-around">space-around</b>'''

<div style="margin: 0 0 1em 2em;">[[#flex-item|伸缩盒项目]]会平均地分布在行里，两端保留一半的空间。如果最左边的剩余空间是负数，或该行只有一个[[#flex-item|伸缩盒项目]]，则该值等效于'[[#justify-content-center|center]]'。在其它情况下，[[#flex-item|伸缩盒项目]]则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。</div>

[[Image:flex-pack-new.png|center]]

<small style="display: block; text-align: center;">图9 通过一个伸缩盒容器中的三个不同颜色的项目，展示5种'justify-content'关键字效果.</small>

=== 側軸對齊 ― ‘[http://dev.w3.org/csswg/css3-flexbox/#align-items <code>align-items</code>]’ 與 ‘[http://dev.w3.org/csswg/css3-flexbox/#align-self <code>align-self</code>]’ 屬性 ===
{{property|<b id{{=}}"align-items">align-items</b> | flex-start <span style{{=}}"color: #CC2200;">{{!}}</span> flex-end <span style{{=}}"color: #CC2200;">{{!}}</span> center <span style{{=}}"color: #CC2200;">{{!}}</span> baseline <span style{{=}}"color: #CC2200;">{{!}}</span> stretch | stretch | 可伸缩盒容器 | 否 | （不適用） | 视觉 | 指定值 | 否 }}

{{property|<b id{{=}}"align-self">align-self</b> | auto <span style{{=}}"color: #CC2200;">{{!}}</span> flex-start <span style{{=}}"color: #CC2200;">{{!}}</span> flex-end <span style{{=}}"color: #CC2200;">{{!}}</span> center <span style{{=}}"color: #CC2200;">{{!}}</span> baseline <span style{{=}}"color: #CC2200;">{{!}}</span> stretch | auto | [[#flex-item|伸缩盒项目]] | 否 | （不適用） | 视觉 |  如果值为'[[#align-self-auto|auto]]'，则计算值为父元素的'[[#align-items|align-items]]'值，否则为指定值 | 否 }}
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#align-items-property}}

[[#flex-item|伸缩盒项目]]可以在伸缩盒容器的当前行的[[#cross-axis|侧轴]]上进行排列，这类似于'[[#justify-content|justify-content]]'属性，但在垂直的方向上。'[[#align-items|align-items]]'用于设置伸缩盒容器中的所有[[#flex-item|项目]]的对齐方式，包括匿名[[#flex-item|伸缩盒项目]]。'[[#align-self|align-self]]'则允许在独立的[[#flex-item|伸缩盒项目]]上覆写默认的对齐方式。（对于匿名伸缩盒项目，'[[#align-self|align-self]]'的值永远与其关联的伸缩盒窗口的'[[#align-items|align-items]]'的值相同。）

如果'[[#align-self|align-self]]'的值为<b id="align-self-auto">'auto'</b>，则其计算值为元素的父元素的'[[#align-items|align-items]]'值，如果其没有父元素，则计算值为'[[#align-items-stretch|stretch]]'。有以下对齐方式：

'<b id="align-items-flex-start">flex-start</b>'

<div style="margin: 0 0 1em 2em;">[[#flex-item|伸缩盒项目]]的[[#cross-start|侧轴起始位置]]的边距边界紧靠住该行的[[#cross-start|侧轴起始]]边界。</div>

'<b id="align-items-flex-start">flex-end</b>'

<div style="margin: 0 0 1em 2em;">[[#flex-item|伸缩盒项目]]的[[#cross-end|侧轴结束位置]]的边距边界紧靠住该行的[[#cross-end|侧轴结束]]边界。</div>

'<b id="align-items-center">center</b>'

<div style="margin: 0 0 1em 2em;">[[#flex-item|伸缩盒项目]]的边距盒在该行的[[#cross-axis|侧轴]]上居中放置。（如果伸缩行的尺寸小于[[#flex-item|伸缩盒项目]]的尺寸，则会向两个方向溢出相同的长度）。</div>

'<b id="align-items-baseline">baseline</b>'

<div style="margin: 0 0 1em 2em;">如果[[#flex-item|伸缩盒项目]]的行内轴与[[#cross-axis|侧轴]]为同一条，则该值怀'[[#align-items-flex-start|flex-start]]'等效。

其它情况下，<b id="baseline-participation">该值将参与基线对齐</b>。所有参与该对齐方式的[[#flex-item|伸缩盒项目]]将按一定方式排列，首先将它们的基线进行对齐，随后其中基线至其[[#cross-start|侧轴起始位置]]的边距边界距离最长的那个项目将紧靠住该行的[[#cross-start|侧轴起始]]边界。</div>

'<b id="align-items-stretch">stretch</b>'

<div style="margin: 0 0 1em 2em;">如果[[#cross-size-property|指定侧轴大小的属性]]值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

{{note|注意：如果伸缩盒窗口的高度被限制，则该值可能导致[[#flex-item|伸缩盒项目]]的内容溢出该项目。}}

伸缩盒项目的[[#cross-start|侧轴起始位置]]的边距边界紧靠住该行的[[#cross-start|侧轴起始]]边界。</div>

[[Image:flex-align.png|center]]

<small style="display: block; text-align: center;">图10 通过一个伸缩盒容器中的四个不同颜色的项目，展示5种'[[#align-items|align-items]]'关键字效果</small>

=== 堆疊伸縮行 ― ‘[http://dev.w3.org/csswg/css3-flexbox/#align-content <code>align-content</code>]’ 屬性 ===
{{property|<b id{{=}}"align-content">align-content</b> | flex-start <span style{{=}}"color: #CC2200;">{{!}}</span> flex-end <span style{{=}}"color: #CC2200;">{{!}}</span> center <span style{{=}}"color: #CC2200;">{{!}}</span> space-between <span style{{=}}"color: #CC2200;">{{!}}</span> space-around <span style{{=}}"color: #CC2200;">{{!}}</span> stretch | stretch | [http://dev.w3.org/csswg/css3-flexbox/#multi-line 多行]的伸缩盒容器 | 否 | （不適用） | 视觉 | 指定值 | 否 }}
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#align-content-property}}

当伸缩盒容器的侧轴还有多余空间时，'[[#align-content|align-content]]'属性用于将容器的行进行对齐，这与'[[#justify-contnet|justify-content]]'属性用于在主轴上对齐独立的项目类似：

'<b id="align-content-flex-start">flex-start</b>'

<div style="margin: 0 0 1em 2em;">各行向伸缩盒容器的起始位置堆叠。伸缩盒容器中第一行的[[#cross-start|侧轴起始]]边界紧靠住该伸缩盒容器的[[#cross-start|侧轴起始]]边界，之后的每一行都紧靠住前面一行。</div>

'<b id="align-content-flex-end">flex-end</b>'

<div style="margin: 0 0 1em 2em;">各行向伸缩盒容器的结束位置堆叠。伸缩盒容器中最后一行的[[#cross-end|侧轴起结束]]界紧靠住该伸缩盒容器的[[#cross-end|侧轴结束]]边界，之后的每一行都紧靠住前面一行。</div>

'<b id="align-content-center">center</b>'

<div style="margin: 0 0 1em 2em;">各行向伸缩盒容器的中间位置堆叠。各行两两紧靠住同时在伸缩盒容器中居中对齐，保持伸缩盒容器的侧轴[[#cross-start|起始内容]]边界和第一行之间的距离与该容器的[[#cross-end|侧轴结束]]内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）</div>

'<b id="align-content-space-between">space-between</b>'

<div style="margin: 0 0 1em 2em;">各行在伸缩盒容器中平均分布。如果剩余的空间是负数或伸缩盒容器中只有一行，该值等效于'[[#align-content-flex-start|flex-start]]'。在其它情况下，第一行的[[#cross-start|侧轴起始]]边界紧靠住伸缩盒容器的[[#cross-start|侧轴起始]]内容边界，最后一行的[[#cross-end|侧轴结束]]边界紧靠住伸缩盒容器的[[#cross-end|侧轴结束]]内容边界，剩余的行则按一定方式在伸缩盒窗口中排列，以保持两两之间的空间相等。</div>

'<b id="align-content-space-around">space-around</b>'

<div style="margin: 0 0 1em 2em;">各行在伸缩盒容器中平均分布，在两边各有一半的空间。如果剩余的空间是负数或伸缩盒容器中只有一行，该值等效于'[[#align-content-center|center]]'。在其它情况下，各行会按一定方式在伸缩盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。</div>

'<b id="align-content-stretch">stretch</b>'

<div style="margin: 0 0 1em 2em;">各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'[[#align-content-flex-start|flex-start]]'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。</div>

{{note|注意：只有多行的伸缩盒容器才会在侧轴上有多余的空间以供对齐，因为仅包含一行的伸缩盒容器中，唯一的一行会自动伸展填充全部的空间。}}

[[Image:align-content-example.png|center]]

<small style="display: block; text-align: center;">图11 展示'[[#align-content|align-content]]'各关键字对多行的伸缩盒容器的效果</small>

=== 伸縮容器的基線 ===
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#flex-container-baseline}}

一個伸縮容器的基線由以下步驟決定：

* 若任一個在伸縮容器第一行（經過 ‘[[#order|<code>order</code>]]’ 重新排序之後） 的[[#flex-item|伸縮項目]] ‘[http://dev.w3.org/csswg/css3-flexbox/#align-self <code>align-self</code>]’ 的計算值是 ‘<code>baseline</code>’，則伸縮容器的基線是那些[[#flex-item|伸縮項目]]的基線。
* 否則，若伸縮容器有一個以上的[[#flex-item|伸縮項目]]，且第一個[[#flex-item|伸縮項目]]（經過 ‘[[#order|<code>order</code>]]’  重新排序之後）的基線與伸縮容器的主軸平行，則伸縮容器的基線是其第一個[[#flex-item|伸縮項目]]的基線。
* 否則，伸縮容器的基線是其內容盒的「後」端。

== {{anchor|layout-algorithm}}伸縮布局演算法 ==
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#layout-algorithm}}

本章節涵蓋了具有規範性的演算法，詳述伸縮容器與其內容布局的準確行為。演算法以容易閱讀的方式呈現，並不一定是最有效率的演算法。使用者代理可使用任何想用的演算法，但是產生結果必須與這裡的演算法一致。

{{note|本章節的目標讀者為實作者。除非某網頁作者具有追根究柢的企圖心，了解神秘的 CSS 布局的渴望，否則網頁作者應該可以從各個單獨的屬性解釋找到要查的東西。}}

在以下演算法中，<b id="definite-size">明確尺寸</b>是指不需要靠測量內容決定的大小：例：<length>、初始包含塊的大小、一個靠明確尺寸決定的 <percentage>。<b id="indefinite-size">不明確尺寸</b>是指不[[#definite-size|明確]]的大小。

以下各小節描述了布局一個伸縮容器與其內容的演算法。

=== 起始設定 ===
<ol start="0">
  <li>'''生成無名伸縮項目：'''依[[#flex-items|《伸縮項目》]]小節的描述。</li>
  <li>'''根據 ‘[[#order|<code>order</code>]]’ 重新排序伸縮項目。'''有最小（負值最大）‘[[#order|<code>order</code>]]’ 的伸縮項目排在第一個。若有多個項目有相同的 ‘[[#order|<code>order</code>]]’ 值，這些項目照文件順序排。這個步驟影響了伸縮項目生盒樹成的盒子的順序，也影響了後面的演算法如何處理各項目。</li>
</ol>

=== 決定一行長度===
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#line-sizing}}

<ol start="2">   <li>'''決定伸縮項目可用的主、側空間。'''對於主、側兩個方向，若伸縮容器的在那個方向具有[[#definite-size|明確尺寸]]，使用該長度。否則，從該方向中伸縮容器的可用空間中減去邊界、邊框與邊距並使用該值。<span style="color: green; margin: 1em;">這個結果可能是無限大。</span></li>
  <li><p>'''決定各項目的<b id="flex-base-size">「伸縮基準長度」</b>與<b id="hypothetical-main-size">「假定主長度」</b>：'''</p>
<ul>
<li>若項目具有[[#definite-size|明確]]伸縮基準值，該值為[[#flex-base-size|伸縮基準長度]]。</li>
<li>若伸縮基準值是 ‘<code>auto</code>’ 又或伸縮基準值取決於項目的可用空間，且伸縮容器以最小內容或最大內容限制決定大小（例：進行[http://www.w3.org/TR/CSS21/tables.html#auto-table-layout 自動表格布局]的時候 [[HTML5/references#refsCSS|[CSS21]]]），則也使用該限制決定項目的大小。[[#flex-base-size|伸縮基準長度]]為這個過程在主軸最後的大小。</li> <li>否則，若伸縮基準值是 ‘<code>auto</code>’ 又或伸縮基準值取決於項目的可用空間，且可用的主軸空間為無限大，又伸縮容器的主軸與項目的行內軸平行，則使用[http://dev.w3.org/csswg/css3-writing-modes/#orthogonal-flows 垂直流中的盒的規則]布局該項目 [[HTML5/references#refsCSS3-WRITING-MODES|[CSS3-WRITING-MODES]]]。[[#flex-base-size|伸縮基準長度]]為項目的最大內容主長度。</li> <li>否則，使用項目的伸縮基準值當作主長度，並將  ‘<code>auto</code>’ 視為是 ‘<code>max-content</code>’ 之後，在可用空間裡進行布局。[[#flex-base-size|伸縮基準長度]]為這個過程在主軸最後的大小。</li></ul>
<p>項目的[[#flex-base-size|伸縮基準長度]]截至其最大、最小值（透過最大、最小主長度屬性）即為[[#hypothetical-main-size|假定主長度]]。</p></li>
<li> '''決定伸縮容器的主長度：'''使用其[[#main-size-property|主長度屬性]]。在本計算中，伸縮容器的最小內容主長度是所有伸縮容器裡伸縮項目的「最小內容長度貢獻」的最大值，伸縮容器的最大內容主長度是所有伸縮容器裡伸縮項目的「最大內容長度貢獻」的和。一個項目的「最小／最大內容長度貢獻」是當項目以最小內容或最大內容限制決定大小時，項目的外-[[#hypothetical-main-size|假定主長度]]。在這個計算中，使用者代理會將 ‘[[#auto-margins|<code>auto</code>]]’ 邊界視為 ‘<code>0</code>’。</li></ol>

=== 決定主長度===
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#main-sizing}}

<ol start="5">
  <li id="algo-line-break">'''蒐集伸縮項目成伸縮行：'''
    <ul><li>若伸縮容器為單行，則蒐集所有彈性項目至單一個伸縮行。</li>
        <li>否則，從第一個尚未蒐集進來的項目開始，盡可能的蒐集伸縮項目直到伸縮容器的內主長度不夠或碰到強迫中斷（不過至少蒐集一個）進一個伸縮行。CSS2.1 ‘<code>page-break-before/after</code>’ [[HTML5/references#refsCSS2|[CSS21]]] 或 CSS3 ‘<code>break-before/after</code>’ [[HTML5/references#refsCSS3-BREAK|[CSS3-BREAK]]] 屬性設有分段中斷時，使用者代理會將之視為強迫中斷。</li></ul>
       <p>在本步驟中，伸縮項目的長度是外-[[#hypothetical-main-size|假定主長度]]。</p>
       <p>重複直到收集了所有伸縮項目。</p>
       {{note|除非主長度為零的項目在伸縮容器的開頭，這些項目不可能是一個行開頭。儘管前一行的最後一個非零項目已經「填滿」了前一行，「盡可能收集」會把主長度為零的項目蒐集進前一行的尾端。}}</li>
  <li>'''[[#resolve-flexible-lengths|決定可伸縮長度]]：'''決定所有伸縮項目的可伸縮長度以找到項目主長度的使用值。</li></ol>

=== 決定側長度 ===
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#cross-sizing}}

<ol start="7">
  <li><p>'''決定每個項目的<b id="hypothetical-cross-size">假定側長度</b>：'''將 ‘<code>auto</code>’ 當作 ‘<code>fit-content</code>’ 並使用主長度的使用值與可用空間進行布局以找到假定側長度。</p></li>
  <li id="algo-cross-line"><p>'''計算各伸縮行的側長度。'''</p>
      <p>若伸縮容器僅有單一行（儘管容器是[[#multi-line|多行]]伸縮容器），則伸縮行的側長度是伸縮容器的內-側長度。</p>
      <p>否則，對於各伸縮行：</p>
      <ol><li>蒐集所有行內軸與主軸平行，且 ‘[[#align-self|<code>align-self</code>]]’ 是 ‘[[#align-items-baseline|<code>baseline</code>]]’，且側軸的邊界都不為 ‘<code>auto</code>’ 的所有項目。找出這些項目中基線與假定外-側始邊的最大距離，找出項目基線與假定外-側結邊的最大距離，並將兩個值相加。</li>
          <li>在所有沒被前一個步驟蒐集的項目中，找出最大的外-[[#hypothetical-cross-size|假定側長度]]。</li>
         <li>伸縮行側長度的使用值是前兩步驟找到的值中較大的那一個。</li></ol></li>
  <li>'''處理 ‘<code>align-content: stretch</code>’ 。'''若伸縮容器具有[[#definite-size|明確]]的側長度，且 ‘[[#align-content|<code>align-content</code>]]’，且伸縮行側長度的總和小於伸縮容器的內-側長度，則給各伸縮行增加相同的側長度，使得側長度的總和剛好與伸縮容器的內-側長度相等。
  <li><p>'''折疊 ‘<code>visibility: collapse</code>’ 項目。'''若有 ‘<code>visibility: collapse</code>’ 的伸縮項目，記下項目所在的行的側長度為項目的<b id="strut-size">支撐長度</b>，並從頭開始重新布局。</p>
      <p>在第二輪布局中，當進行[[#algo-line-break|蒐集伸縮項目成伸縮行]]步驟的時候，將已折疊項目的主長度當作是零。在該步驟之後的剩下的演算法步驟裡，完全忽略已折疊的項目（將這些視為 ‘<code>display: none</code>’ ），但是在[[#algo-cross-line|計算各伸縮行的側長度]]的步驟之後，若有任何一行的側長度小於在該行所有已折疊的項目裡最大的[[#strut-size|支撐長度]]，將該行的側長度設為該[[#strut-size|支撐長度]]。</p>
      <p>在第二輪布局中跳過本步驟</p></li>
  <li>'''決定各伸縮項目側長度的使用值。'''若伸縮項目設有 ‘<code>align-self: stretch</code>’，且其側長度屬性是 ‘<code>auto</code>’，且其側軸邊界都不是 ‘<code>auto</code>’，則外-側長度的的使用值是其伸縮行的側長度截至最大、最小值（透過側長度屬性）的結果。否則，側長度的使用值是項目的[[#hypothetical-cross-size|假定側長度]]。</li></ol>

=== 主軸對齊 ===
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#main-alignment}}

<ol start="11"><li><p>'''分配剩下的空間。'''對於各伸縮行：</p>
<ol>
  <li>若剩下的空間為正且在這行中至少有一個主軸邊界是 ‘<code>auto</code>’，將剩下的空間平均分配給這些邊界。否則，將所有 ‘<code>auto</code>’ 邊界設為零。</li>
  <li>按照 ‘[[#justify-content|<code>justify-content</code>]]’ 進行沿著主軸的項目對齊。</li>
</ol></ol>

=== 側軸對齊 ===
<ol start="12">
  <li>'''決定側軸 ‘<code>auto</code>’ 邊界。'''若某個伸縮項目有 ‘<code>auto</code>’ 側軸邊界：
  <ol>
  <li>若其（將 ‘<code>auto</code>’ 邊界視為零）外-側長度小於其伸縮行的側長度，將長度的差異平均分配給 ‘<code>auto</code>’ 邊界。</li>
  <li>否則，若始或頭邊界（在側軸那邊的那一個）是 ‘<code>auto</code>’，將之設為零 ― 將相反邊的邊界設成一個會讓項目的外側長度等於其伸縮行的側長度的邊界。</li>
  </ol></li>
  <li>'''沿著側軸對齊所有的伸縮項目：'''若項目的兩個側軸邊界都不為 ‘<code>auto</code>’ ，按照 ‘[[#align-self|<code>align-self</code>]]’ 對齊該伸縮項目。</li>
  <li><p>'''決定伸縮容器側長度的使用值：'''</p>
         <ul><li> 若側長度屬性有[[#definite-size|明確]]大小，使用該值。</li>
                 <li>否則，使用各伸縮行的側長度的總和。</li></ul></li>
  <li>'''對齊所有伸縮行：'''按照 ‘[[#align-content <code>align-content</code>]]’ 對齊所有伸縮行。</li>
</ol>

=== {{anchor|resolve-flexible-lengths}}決定可伸縮長度 ===
{{eng ver|http://dev.w3.org/csswg/css3-flexbox/#resolve-flexible-lengths}}

使用以下步驟決定伸縮行裡項目的可伸縮長度：

# '''決定使用哪個伸縮比例。'''先求目標行裡所有項目外-[[#hypothetical-main-size|假定主長度]]的總和。若總和小於伸縮容器的內主長度，則在本演算法之後的部份使用[[#flex-grow-ratio|擴展比率]]。否則，使用[[#flex-shrink-ratio|收縮比率]]。
# '''決定不可伸縮項目的大小。'''對於任何伸縮比率為零的項目，設項目主長度的使用值為項目的[[#hypothetical-main-size|假定主長度]]。
# '''確認可否配置空間。'''若所有目標行裡的伸縮項目都要不是被凍結要不是伸縮比率為零，則結束本演算法。
# '''計算可配置空間。'''先求目標行裡所有項目外-[[#flex-base-size|伸縮基準長度]]的總和，將伸縮容器的內主長度剪掉總和，即為可配置空間。
<ol start="5"><li>
  <p>'''配置正比於伸縮比例的空間。'''若可配置空間的正負號與選擇伸縮比率的正負號相同，配置正比於項目伸縮比率的空間到可伸縮項目主長度裡：</p>
<p>'''若可配置空間為正'''</p>
<p style="padding: 0 2em;">找出項目[[#flex-grow-ratio|擴展比率]]與目標行裡項目的[[#flex-grow-ratio|擴展比率]]總和的比率。將項目的主長度設為[[#flex-base-size|伸縮基準長度]]加可配置空間裡此項目佔有的部份（使用前面算出的比率）。</p>
<p>'''若可配置空間為負'''</p>
<p style="padding: 0 2em;">對於每一個在目標行的項目，將[[#flex-shrink-ratio|收縮比率]]乘上外-[[#flex-base-size|伸縮基準長度]]，將這個值記為<b id="scaled-flex-shrink-ratio">正規化收縮比率</b>。找出項目[[#scaled-flex-shrink-ratio|正規化收縮比率]]與目標行裡項目的[[#scaled-flex-shrink-ratio|正規化收縮比率]]總和的比率。將項目的主長度設為[[#flex-base-size|伸縮基準長度]]減可配置空間裡此項目佔有的部份（使用前面算出的比率）。<span style="color: green; margin: 1em;">請注意得到的內主長度可能是負的 ― 下一個步驟會校正這個問題。</span></p></li>
<li>
'''修復最大、最小違規。'''將項目的主長度截至其最大、最小值（透過主長度屬性）。若項目的主長度變小，則這是最大違規。若項目的主長度變大，則這是最小違規。</li>
<li>
<p>總違規事前一個步驟所有調整的總和（截至其最大、最小後的長度 - 未截至其最大、最小後長度）。若總違規為：</p>
<p>'''零'''</p>
<p style="padding: 0 2em;">離開演算法。</p>
<p>'''正'''</p>
<p style="padding: 0 2em;">凍結所有最小違規，重設所以其它項目到進入本演算法的大小，並回到本演算法的步驟 2。</p>
<p>'''負'''</p>
<p style="padding: 0 2em;">凍結所有最大違規，重設所以其它項目到進入本演算法的大小，並回到本演算法的步驟 2。</p></li></ol>

== 伸縮容器中的分頁 ==
== CSSOM ==
Templates used on this page:
Return to Css3-flexbox.
Retrieved from "https://www.w3.org/html/ig/zh/wiki/Css3-flexbox"
View source for Css3-flexbox

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Navigation

Tools
