CSS3 彈性盒子

彈性盒子是 CSS3 的一種新的佈局模式。

CSS3 彈性盒（flexible box 或 flexbox），是一種當頁面須要適應不一樣的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式。

引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

1 概覽

彈性盒子由彈性容器（flex container）和彈性子元素（flex item）組成。彈性容器經過設置 display 屬性的值爲 flex 或 inline-flex 將其定義爲彈性容器。彈性容器內包含了一個或多個彈性子元素。

注意： 彈性容器外及彈性子元素內是正常渲染的。 彈性盒子只定義了彈性子元素如何在彈性容器內佈局。 彈性子元素一般在彈性盒子內一行顯示。默認狀況每一個容器只有一行。

注意： 若是咱們設置 direction 屬性爲 rtl（right-to-left），彈性子元素的排列方式是從右往左；direction 屬性爲 ltr（left-to-right），彈性子元素的排列方式是從左往右。

2 容器屬性：flex-direction

flex-direction 屬性指定了彈性子元素在父容器中的位置。若是元素不是彈性盒對象的元素，則 flex-direction 屬性不起做用。

.flex-container { flex-direction: row | row-reverse | column | column-reverse; }
複製代碼

row： 橫向從左到右排列（左對齊），默認的排列方式 row-reverse： 反轉橫向排列（右對齊），從後往前排，最後一項排在最前 column： 縱向排列 column-reverse： 反轉縱向排列，從後往前排，最後一項排在最上面

3 容器屬性：flex-wrap

flex-wrap 屬性用於指定彈性盒子的子元素換行方式。規定 flex 容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。

.flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }
複製代碼

4 容器屬性：flex-flow

flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認值爲 row nowrap。

.flex-container { flex-flow: <flex-direction> <flex-wrap>; }
複製代碼

5 容器屬性：align-items

align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。

.flex-container { align-items: flex-start | flex-end | center | baseline | stretch; }
複製代碼

6 容器屬性：justify-content

justify-content 用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。

.flex-container { justify-content: flex-start | flex-end | center | space-between | space-around; }
複製代碼

7 子元素屬性：order

設置彈性盒子的子元素排列順序。

.flex-container .flex-item { order: <integer>; }  
複製代碼

integer：用整數值來定義排列順序，數值小的排在前面。能夠爲負值，默認爲 0。

8 子元素屬性：flex-grow

.flex-container .flex-item { flex-grow: <integer>; }
複製代碼

integer：一個數字，規定項目將相對於其餘靈活的項目進行擴展的量。默認值是 0。

9 子元素屬性：flex-shrink

.flex-container .flex-item { flex-shrink: <integer>; }
複製代碼

integer：一個數字，規定項目將相對於其餘靈活的項目進行收縮的量。默認值是 1。

10 子元素屬性：flex-basis

.flex-container .flex-item { flex-basis: <integer> | auto; }
複製代碼

integer：一個長度單位或者一個百分比，規定元素的初始長度。 auto：默認值。長度等於元素的長度。若是該項目未指定長度，則長度將根據內容決定。

11 子元素屬性：flex

flex 屬性用於設置或檢索彈性盒模型對象的子元素如何分配空間。 flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。

.flex-container .flex-item { flex: flex-grow flex-shrink flex-basis | auto | initial | inherit; }
複製代碼

12 子元素屬性：align-self

align-self 屬性用於設置彈性元素自身在側軸（縱軸）方向上的對齊方式。

.flex-container .flex-item { align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit; }
複製代碼

13 其餘知識點

塊元素垂直居中問題採用 flex 解決。

完美的居中，使用彈性盒子，居中變得很簡單，只須要設置 margin: auto，就能夠使彈性子元素在彈性容器的兩軸方向都徹底居中。

行內元素垂直居中問題解決以下：

單行： 該元素 CSS 屬性 line-height 的值與該元素的父級元素 CSS 屬性 height 一致便可。

多行： 設置該元素 CSS 屬性：display: table-cell; vertical-align: middle; 還需設置該元素的父級元素 CSS 屬性：display: table;