細說flex佈局

最近可貴有空，總結一下flex佈局相關知識點，若有錯漏，請大神指點糾正，謝謝~

flex佈局總結:

快速記憶

• 主軸方向記住justify

• 交叉軸方向記住align

  • 關係就是：

    • justify-content
    • align-items
    • align-self
• 設置主軸方向flex-direction
• 設置換行：flex-wrap
• 設置主軸和換行的複合屬性：flex-flow
• 設置伸縮基準：felx-basis
• 設置拉伸：flex-grow
• 設置縮放：flex-strink
• 設置子元素順序：order

兼容性寫法：

display: -webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;

四種佈局方式：

1.標準文檔流
2.浮動佈局
3.定位佈局
4.flex佈局

flex佈局核心：

flex核心主要在軸和容器上作文章，下面主要以軸（主軸和交叉軸）和容器（父容器和子容器）來闡述。

容器:父容器

父容器屬性能夠設置子容器統一排列方式

主軸方向：

1.justify-content：

父容器設置子容器在主軸的排列：

對應屬性值排列方式：

*位置排列：
flex-start
flex-end
center

*分佈排列：
space-around
space-between

交叉軸方向：

2.align-items：

父容器設置子容器在交叉軸的排列：

對應屬性值排列方式：

*位置排列：
flex-start
flex-end
center

*基線排列：
baseline

*拉伸排列：
stretch

進階屬性：

3.flex-wrap：設置換行方式

換行：wrap
不換行：nowrap
逆序換行：wrap-reverse

逆序換行是指沿着交叉軸的反方向換行

4.flex-flow:軸向和換行，是flex-direction和flex-wrap的組合屬性

flow 即流向，也就是子容器沿着哪一個方向流動，流動到終點是否容許換行，好比 flex-flow: row wrap，flex-flow 是一個複合屬性，至關於 flex-direction 與 flex-wrap 的組合，可選的取值以下：

row nowrap、column wrap 等，也可二者同時設置

5.align-content:多行沿交叉軸對齊：

當子容器多行排列時，設置行與行之間的對齊方式。

對應屬性值排列方式：

*位置排列：
flex-start
flex-end
center

*分佈排列：
space-around
space-between

*拉伸排列：
stretch

#### 6.flex-direction：
不一樣主軸方向位置不一樣

主軸位置方向對應屬性值：

向右：row
向左：row-reverse
向下：coloumn
向上：coloumn-reverse

容器:子容器

子容器屬性能夠設置自身排列方式

1.flex：

子容器設置自身容器的伸縮比例：
對應屬性值單位方式：

無單位數字：1,2,3
有單位數字：15px,50px,100px
none關鍵字：不伸縮

2.align-self：

子容器設置自身的交叉軸排列
對應屬性值排列方式：

*位置排列：
    flex-start
    flex-end
    center
    
*基線排列：
    baseline
    
*拉伸排列：
    stretch

子容器進階屬性

3.flex-basis:設置基準大小

• flex-basis 表示在不伸縮的狀況下子容器的原始尺寸。
• 主軸爲橫向時表明寬度
• 主軸爲縱向時表明高度：

4.flex-grow：設置擴展比例

• 子容器彈性伸展的比例,剩餘空間按比例 擴展拉伸 分配

5.flex-shrink：設置收縮比例，剩餘空間按比例 擴展收縮 分配

• 子容器彈性收縮的比例。

6.order:設置主軸排列順序

• 改變子容器的排列順序，覆蓋 HTML 代碼中的順序，默認值爲 0，能夠爲負值，數值越小排列越靠前。

軸

主軸:

• 決定容器水平方向的排列
• 主軸的起始端由 flex-start 表示，末尾段由 flex-end 表示

交叉軸

• 決定容器垂直方向的排列
• 交叉軸的起始端和末尾段也由 flex-start 和 flex-end 表示
• 主軸沿逆時針旋轉90°獲得交叉軸

flex佈局共有13個屬性

• 一個聲明：display：flex
• 6個主容器
• 6個子容器

以下圖：