CSS 中的 Flex 佈局 徹底指南

Flex 彈性盒子佈局是很強大的佈局，它能夠很方便的控制元素在垂直和水平方向上的行爲。

要使用 Flex，首選須要一個 Flex 容器（flex container）。使用display: flex;建立，flex 是一個 CSS 的display屬性中新添加一個值，而容器下的每一個子元素將成爲 flex item（伸縮項目）。伸縮項目將參與到 flex 佈局中，全部由 CSS Flexible Box Layout Module（CSS伸縮盒佈局模型）定義的屬性都能被它們使用。

設爲 Flex 佈局之後，子元素的float、clear和vertical-align屬性將失效。

主軸和交叉軸

容器存在兩個軸，水平叫主軸（Main-Axis），垂直叫交叉軸（Cross-Axis）。主軸左邊是開始位置（main start）右邊是結束位置（main end），交叉軸上是開始位置（cross start）下是結束位置（cross end）。咱們用 justify 屬性控制主軸項目的空隙，使用 align 屬性控制交叉軸項目之間的垂直行爲。

容器的屬性

容器一共有 6 個屬性：

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

flex-direction

flex-direction 屬性決定主軸的方向。一共有 4 個值row | row-reverse | column | column-reverse，初始值是row。交叉軸是垂直於主軸的，若是它值爲column那麼交叉軸就是水平方向。

• row 是默認
• row-reverse 將起點變爲右邊
• column 主軸爲垂直方向，起點在上面
• column-reverse 主軸爲垂直方向，起點在下面

flex-wrap

指定 flex 元素單行顯示仍是多行顯示 。若是容許換行，這個屬性容許你控制行的堆疊方向。它一共有 3 個值nowrap | wrap | wrap-reverse，起始值是nowrap。

• nowrapflex 的元素被擺放到到一行，這可能致使溢出 flex 容器
• wrapflex 元素 被打斷到多個行中

  

• wrap-reverse和wrap的行爲同樣，可是cross-start和cross-end互換。

flex-flow

flex-direction和flex-wrap的簡寫。默認是flex-flow: row nowrap;

justify-content

定義了瀏覽器如何分配順着父容器主軸的彈性元素之間及其周圍的空間。它有不少屬性，可是其中有不少是不經常使用。

經常使用的 7 個屬性：

• space-between在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最後一個元素與行尾對齊
• space-around和space-between相似，可是每行第一個元素到行首的距離和每行最後一個元素到行尾的距離將會是相鄰元素之間距離的一半
• space-evenly和space-around相似，可是相鄰flex項之間的間距，主軸起始位置到第一個flex項的間距，主軸結束位置到最後一個flex項的間距，都徹底同樣
• stretchflex 子項的寬度和大於容器，則各個子項根據本身的大小縮放來撐滿容器，若是子項和的最小寬度大於容器，則會撐開容器，若是和小於容器則至關於flex-start
• flex-start從行首開始排列。每行第一個彈性元素與行首對齊，同時全部後續的彈性元素與前一個對齊
• flex-end從行尾開始排列。每行最後一個彈性元素與行尾對齊，其餘元素將與後一個對齊
• center伸縮元素向每行中點排列。每行第一個元素到行首的距離將與每行最後一個元素到行尾的距離相同

若是它和flex-direction: column;結合，則會這樣：

align-items

定義項目在交叉軸上如何對齊。

它一共有 5 個經常使用屬性。

• flex-start
• flex-end
• center
• stretch
• baseline

align-content

定義了多根軸線（多行）的對齊方式。該屬性對單行彈性盒子模型無效。（即：帶有flex-wrap: nowrap）。

一共有 6 個經常使用屬性：

• flex-start與交叉軸的起點對齊

  

• flex-end與交叉軸的終點對齊

  

• center與交叉軸的中點對齊

  

• space-between與交叉軸兩端對齊，軸線之間的間隔平均分佈

  

• space-around每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍

  

• stretch拉伸全部行來填滿剩餘空間。剩餘空間平均的分配給每一行（默認值）

  

flex item 的屬性

flex 項一共有 6 個屬性：

1. flex-basis
2. flex-grow
3. flex-shrink
4. flex
5. order
6. align-self

flex-basis

flex-basis和min-width類似，指定了 flex 元素在主軸方向上的初始大小。（若是不使用 box-sizing 來改變盒模型的話，那麼這個屬性就決定了 flex 元素的內容盒（content-box）的寬或者高的大小。）根據內部內容擴展項目的大小。若是不是，將使用默認基準值。

flex-grow

定義彈性盒子項（flex item）的拉伸因子，將相對於同一行上全部其餘項目的大小總和進行縮放，這些項目將根據指定的值自動調整。它的值是number，負數無效。

flex-shrink

指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大於容器的時候纔會發生收縮，其收縮的大小是依據 flex-shrink 的值。

flex

它是flex-grow, flex-shrink和flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

order

用來從新排列項目的天然順序。元素按照order屬性的值的增序進行佈局。擁有相同order 屬性值的元素按照它們在源代碼中出現的順序進行佈局。

align-self

會對齊當前 flex 行中的 flex 元素，並覆蓋align-items的值. 若是任何 flex 元素的側軸方向margin值設置爲auto，則會忽略align-self。