導讀

• Flexbox背景起源
• 基礎概念（重點）
• 彈性容器屬性（重點）
• 彈性項目屬性（重點）

Flexbox背景起源

2017年10月，W3C推薦使用Flexbox模塊寫布局。
在此之前，我們的布局模型有三種：

• 流動布局
• 浮動布局
• 定位布局
  以上三種布局的共同點是：基于元素方向
• 塊元素：自上而下
• 行內(nèi)元素：自左而右
• 在布局的時候，父元素對子元素幾乎沒有什么掌控力，這句話的意思是上，在布局方面，父子意思之間的關系不夠緊密。

Flexbox的目的
為各種限時設備和屏幕尺寸提供了一種更高效的布局方式，來處理元素布局以及元素之間的空間。

核心思想
賦予父元素一種超能力，讓父元素具有改變子元素的能力：

• 改變子元素的尺寸
• 改變子元素的位置
• 改變子元素的排序
• 改變子元素之間的空白

基礎概念

flexbox.png

• 彈性容器屬性
• 彈性項目屬性

彈性容器 - 被設置了disolay:flex的元素成為彈性容器。彈性容器對子元素有掌控力。
彈性項目 - 彈性容器的子元素被稱為彈性項目。彈性項目受到父元素的控制。

主軸 - 彈性項目排列的軸，多個彈性項目從主軸起點向主軸終點排列。

垂直軸 - 垂直于主軸的軸就是垂直軸。多行彈性項目沿垂直軸排列。

主軸

1.display

1.display.jpg

定義：
Display屬性用于定義彈性容器
語法

  .container{
       display:flex | inline-flex
}

• flex:塊級彈性容器
• inline-flex:行內(nèi)塊

2.flex-wrap

2.flex-wrap.jpg

定義：
flex-wrap用于定義折行方式。
語法

  flex-erap:nowrap | wrap | wrap-reverae

• nowrap:不換行。所有彈性項目顯示在一行內(nèi)。默認值。
• wrap：向垂直軸終點換行。彈性項目根據(jù)彈性容器寬度
• wrap-reverae：向垂直軸起點方向換行。彈性項目根據(jù)彈性容器的寬度自動換行。

3.flex-direction

3.flex-direction.jpg

定義
用于設置彈性盒模型的主軸方向。主軸方向就是元素的排列方式。

語法

  flex-direction:row | row-reverse | column | column-reverse

• row：默認值。把主軸設為水平軸。彈性項目從左到右，向上向下排列。
• row-reverse：彈性項目從右到左，從上到下排列。
• column：把主軸設為縱軸。彈性項目從上向下，從左向右排列。
• column-reverse：把主軸設為縱軸，彈性項目從下向上排，

4.justify-content

4.justify-content.jpg

定義
用于設置彈性項目沿主軸的排列方式 。
語法

  .container{
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
}

• flex-start：彈性項目從主軸起點向終點排列。
• flex-end：彈性項目從主軸終點向主軸缺點排列。（順序不變）
• center：彈性項目沿主軸居中排列。
• space-between：彈性項目從主軸起點向主軸終點均勻分布
• space-around：把空白平均分配到每一個彈性項目兩側
• space-evenly：把空白平均分配到每一個彈性項目之間（任意兩個彈性項目之間的空白是相等的）

5.align-items

5.align-items .jpg

定義
align-items:用設置彈性項目沿垂直軸的對齊方式。
語法

  .container{
    align-items:stretch | flex-start | flex-end | center |  baseline
}

• stretch：默認值，默認拉伸子元素的高度
• flex-start：讓彈性項目對齊到垂直軸起點
• flex-end：讓彈性項目對齊到垂直軸終點
• center：讓彈性項目沿垂直軸居中對齊
• baseline：讓彈性項目對齊到垂直軸起點

6. align-content

6. align-content.png

定義
設置彈性項目沿垂直軸的分布方式/對齊方式。

語法

  .container{
    align-content:normal | flex-start | flex-end | center | soace-between | space-around | space-evenly
}

• normal：彈性項目被堆積在它們的默認位置，就好像沒有設置 align-content 值一樣。
• flex-start：默認值。彈性項目向垂直軸起點堆積。
• flex-end：彈性項目向垂直軸終點堆積。
• center：彈性項目向垂直軸中心堆積。
• space-between：空白均勻分布在任意兩個彈性項目之間。（第一個彈性項目在垂直軸起點，最后一個彈性項目在垂直軸終點）
• space-around：空白均勻分布在每個彈性項目兩側。
• space-evenly：空白平均分布在任意兩個彈性項目之間。（包括首尾彈性項目）
  注意：該屬性只對多行彈性容器生效，即flex-wrap 設置為 wrap 或 wrap-reverse。單行彈性容器無效，即 flex-wrap 設置為no-wrap。

7. gan 屬性

用來設置間距的

gan.jpg

定義
gan 屬性用于控制彈性項目之間的空白大小。
注意：該屬性僅控制非邊緣彈性項目。（不控制第一個和最后一個彈性項目）

語法

  .container{
  gap:10px;/*單行：控制水平間距*/
  gap:  10px；/*單行：控制水平和垂直間距*/
  gap: 10px 20px; /* 水平間距 垂直間距*/
}

二、如何讓彈性項目換行

flex-wrap