Flex 佈局教程

Flex佈局

 Flex（Flexible Box）佈局 稱爲 "彈性佈局"，能夠爲網頁的佈局提供最大的靈活性，取代了往常的 浮動（float） 佈局，而且任何一個容器均可以設置 Flex 佈局。
 注：設置 Flex 佈局後，子元素的 Float 佈局將失效
 

Flex中的四大概念

容器： 若是給一個標籤添加display:flex;，那麼這個標籤就是一個容器
項目： 在容器中的直接子元素叫項目（必定是 直接 子元素）
主軸： 項目的默認排序方向就是主軸（默認橫向排列，一個容器能夠有多根主軸）
交叉軸： 和主軸垂直的那個軸，就是交叉軸

---

---

容器的屬性

Flex-direction | Flex-wrap | Flex-flow | justify-content | align-items | align-content

---

1. Flex-direction（屬性決定主軸的方向）

flex-direction：row | row-reverse | column | column-reverse;

• row（默認值）：主軸爲水平方向，起點在左端
• row-reverse：主軸爲水平方向，起點在右端
• column：主軸爲垂直方向，起點在上端
• column-reverse：主軸爲垂直方向，起點在下端

2. Flex-wrap(屬性決定項目排不下時如何換行)

flex-wrap：nowrap | wrap | wrap-reverse;

• norwrap（默認）：不換行
• wrap：換行，第一行在上方
• wrap-reverse：換行，第一行在下方
  

3.Flex-flow（屬性是 flex-direction 和 flex-wrap 的簡寫形式）

• flex-flow: flex-direction || flex-wrap;

4.justify-content(處理項目外的 富餘空間)

• justify-content：flex-start | flex-end | center | space-between | space-around;

• flex-start；（默認值），項目左對齊
• flex-end：項目右對齊
• center： 項目居中
• space-between：項目兩端對齊，項目之間的間隔都相等
• space-around：每一個項目兩側的間隔相等
  

5.align-items(屬性決定項目在交叉軸上如何對齊)

• align-items：stretch | flex-start | flex-end | center | baseline;

• stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度
• flex-start：交叉軸的起點對齊
• flex-end：交叉軸的終點對齊
• center：交叉軸的中點對齊
• baseline：項目的第一行文字的基線對齊
  

注:必須給當前的容器設置高度纔會起做用

6.align-content（屬性決定了多根主軸的對齊方式）

• align-content：stretch | flex-start | flex-end | center | space-between | space-around;

• stretch（默認值）：軸線佔滿整個交叉軸
• flex-start：與交叉軸的起點對齊
• flex-end：與交叉軸的終點對齊
• center：與交叉軸的中點對齊
• space-between：與交叉軸兩端對齊，軸線之間的間隔平均分
• space-around：每根軸線兩側的間隔都相等

項目的屬性

order | flex-grow |flex-shrink | flex-basis | flex | align-self

---

1. order（屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0）

order: <integer>;

2. flex-grow（屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大）

flex-grow：<number>;

3. flex-shrink（屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小）

flex-shrink: <number>;

4. flex-basis(屬性定義了在分配多餘空間以前，項目佔據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小,也能夠設置 xx px,項目將佔據固定空間)

flex-basis: <length> | auto;

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

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

6. align-self（屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch）

align-self: auto | stretch | flex-start | flex-end | center | baseline;

---

^_<