L6.Flexbox 伸縮盒模型

http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/

1 Introduction

CCS2.1中規定了四種佈局模式：

• block layout, designed for laying out documents
• inline layout, designed for laying out text
• table layout, designed for laying out 2D data in a tabular format
• positioned layout, designed for very explicit positioning without much regard for other elements in the document

Flexbox(伸縮佈局盒) 是 CSS3 中一個新的佈局模式，用於複雜的佈局（designed for laying out more complex applications and webpages)

例子：

<style>
#deals {
  display: flex;        /* Flex layout so items have equal height  */
  flex-flow: row wrap;  /* Allow items to wrap into multiple lines */
}
.sale-item {
  display: flex;        /* Lay out each item using flex layout */
  flex-flow: column;    /* Lay out item’s contents vertically  */
}
.sale-item > img {
  order: -1;            /* Shift image before other content (in visual order) */
  align-self: center;   /* Center the image cross-wise (horizontally)         */
}
.sale-item > button {
  margin-top: auto;     /* Auto top margin pushes button to bottom */
}
</style>

二、Terminology 術語

Flexbox 由 伸縮容器 和 伸縮項目 組成。經過設置元素的 display 屬性爲 flex 或 inline-flex 能夠獲得一個伸縮容器。設置爲 flex 的容器被渲染爲一個塊級元素，而設置爲 inline-flex 的容器則渲染爲一個行內元素。

下圖是能夠看出flex-flow與以前熟悉的元素的映射關係。The flex-flow value determines how these terms map to physical directions (top/right/bottom/left), axes (vertical/horizontal), and sizes (width/height).

Flexbox 定義了伸縮容器內伸縮項目該如何佈局。

Flexbox 使用 主軸 和 側軸的概念。伸縮行跟隨主軸。側軸則垂直於主軸。

• 主軸起點 Main Start
• 主軸終點 Main End
• 主軸方向 Main Direction (有時候也成爲伸縮流方向 Flow Direction)
• 側軸起點 Cross Start
• 側軸終點 Cross End
• 側軸方向 Cross Direction

3 Flex Containers: the flex and inline-flex display values

display 值有兩種

flex ：生成一個塊級伸縮容器box

inline-flex： 生成一個內聯伸縮容器box

Flex 容器與以前的塊級元素和內聯元素不一樣，所以不少針對塊級元素定義的屬性在伸縮容器內是沒效果的。（如column-*，float，clear等）

4 Flex Items

4.1 Absolutely-Positioned Flex Children

4.2 Flex Item Margins and Paddings

4.3 Flex Item Z-Ordering

4.4 Collapsed Items 項目摺疊

設置伸縮元素的 visibility:collapse ，

目前爲止，visibility: collapse; 尚未被讓任何瀏覽器正確的實現。

4.5 Implied Minimum Size of Flex Items

 5 Ordering and Orientation

伸縮容器的內容能夠從任何方向任何順序鋪展。主要經過 flex-direction,flex-wrap, and order這三個屬性

5.1 flex-direction 伸縮流的方向

• 默認值是 row：該值表示伸縮項目根據書寫模式的方向佈局(Flex Flow Direction)

• row-reverse: 主軸起點和主軸終點交換。若是書寫模式是從左至右，伸縮項目則是從右往左顯示。
• column: 主軸和側軸交換。若是書寫模式是垂直的(從上到下)，那麼伸縮項目也是垂直顯示的(從上到下)。
• column-reverse: 和 column 同樣，可是方向相反。

5.2 伸縮行換行: the flex-wrap property

nowrap | wrap | wrap-reverse

單行，多行，多行且從cross-end 往cross-start

若是 flex-wrap 設置爲 wrap，在一個伸縮行容不下全部伸縮項目時，伸縮項目會換行到一條新增的伸縮行上。新增的伸縮行根據側軸的方向添加。若爲wrap-reverse，則從側軸反方向添加

5.3 Flex Direction and Wrap: the 

flex-flow shorthand

flex-direction 和flex-wrap 的縮寫。

div1 { flex-flow: row; }

/* Initial value. Main-axis is

   inline, no wrap. */

div2 { flex-flow: column wrap; }

/* Main-axis is block-direction (top to bottom)

   and lines wrap in the inline direction (rightwards). */

div3 { flex-flow: row-reverse wrap-reverse; }

/* Main-axis is the opposite of inline direction

   (right to left). New lines wrap upwards. */

NOTE: 以上三個屬性都是相對writing-mode而言的。

5.4 顯示順序: order

若是須要文檔順序(html的順序)和顯示順序不一樣時，用order，order默認值爲0，設爲-1將顯示在最前面。

6 Flex Lines

• single-line 即便內容可能溢出也放在一行裏
• multi-line  多行

7 Flexibility

7.1 The flex Shorthand

none | [ <‘flex-grow’><‘flex-shrink’>? || <‘flex-basis’> ]

flex: 0 auto

flex: initial = flex: 0 1 auto. 

元素在有剩餘空間的狀況下不會有任何變化，可是在必要的狀況下會被收縮。

flex: auto =flex: 1 1 auto.

元素會根據主軸自動伸縮以佔用全部剩餘空間，能夠經過使用 flex: 1; 來達到同樣的效果

flex: none=flex: 1 1 auto.

在任何狀況都不會發生伸縮。

flex: <positive-number> : 指定一個數字，表明了這個伸縮項目該佔用的剩餘空間比例。剩餘空間被全部指定flex的伸縮元素瓜分。

 

7.3 Components of Flexibility

8 Alignment校準

塊級元素中的margin在伸縮盒中，能作一樣的事情，可是更增強大。

8.1 Aligning with auto margins

margin：auto垂直居中

#login {

  margin-left: auto;

} 致使了全部的剩餘空間被合併到login元素的左邊去了

 用auto margins 和alignment properties的區別：

• 左圖：margin:auto 右圖：（側軸對齊align-self：center），當這個ul在頁面的最左邊時，左圖是合理的佈局。

8.2 Axis Alignment:

the justify-content property主軸對齊（水平方向）

flex-start | flex-end | center | space-between | space-around

8.3 Cross-axis Alignment:

the align-items and align-self properties側軸對齊（豎直方向）

flex-start | flex-end | center | baseline | stretch

8.4 Packing Flex Lines:  align-content 堆棧伸縮行

與 align-items 類似，不過不是對齊伸縮項目，它對齊的是伸縮行

flex-start | flex-end | center | space-between | space-around | stretch

8.5 Flex Baselines

main-axis baseline

cross-axis baseline

9 Flex Layout Algorithm