導(dǎo)讀

• Flexbox的來歷
• 基礎(chǔ)概念（重點）
• 彈性容器屬性（重點）
• 彈性項目屬性（重點）
• 應(yīng)用場景

彈性盒模型

Flexbox的來歷

2017年10月杯瞻，W3C推薦使用Flexbox模塊寫布局甜橱。在此之前，我們的布局模型有三種：流動布局租漂、浮動布局、定位布局。
以上三種布局中诈皿，父元素對子元素幾乎沒有什么掌控力栗菜，父子元素之間的關(guān)系不夠緊密欠雌。隨著移動互聯(lián)網(wǎng)時代的到來，傳統(tǒng)布局在多種顯示設(shè)備和尺寸上顯得不夠靈活疙筹，我們需要一種更高效的布局方式富俄，來處理元素的布局以及元素之間的空間的分配《兀“彈性盒模型”應(yīng)用而生霍比。

核心思想
彈性盒模型的核心思想是賦予父元素一種超能力，讓父元素對子元素擁有掌控力：

• 控制子元素的尺寸
• 控制子元素的位置
• 控制子元素的排序
• 控制子元素之間的空白

基礎(chǔ)概念

flexbox.png

彈性盒模型 - 彈性盒模型它指是一套css屬性規(guī)則暴备，而不是一個css屬性悠瞬。具體來講，分為兩組屬性: 彈性容器屬性 和 彈性項目屬性
彈性容器 - 被設(shè)置了display:flex的元素成為彈性容器涯捻。彈性容器對子元素擁有掌控力浅妆。
彈性項目 - 彈性容器內(nèi)的子元素被稱為彈性項目。彈性項目受到父元素的控制障癌。
主軸 - 彈性項目的主要排列方向凌外。
垂直軸 - 垂直于主軸的軸, 垂直軸是彈性項目的次要排列方向。
主軸起點 - 彈性項目沿主軸排列的起始點涛浙。
主軸終點 - 彈性項目沿主軸排列的終點康辑。
垂直軸起點 - 彈性項目沿垂直軸排列的起始點。
垂直軸終點 - 彈性項目沿垂直軸排列的終點轿亮。

彈性盒模型屬性

父元素屬性

1. display

display:flex 創(chuàng)建彈性容器

定義
Display屬性用于定義彈性容器晾捏。

語法

.container{
  display:flex | inline-flex;
}

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

2. flex-direction

flex-direction 設(shè)置主軸方向

定義
flex-direction用于創(chuàng)建主軸，彈性項目主要沿主軸方向排列哀托。

語法

.container{
  flex-direction: row | row-reverse | column | column-reverse
}

• row: 默認值惦辛。把主軸設(shè)為水平軸,彈性項目從左向右水平排列。
• row-reverse：把主軸設(shè)為水平軸仓手。彈性項目從右向左水平排列胖齐。
• column：把主軸設(shè)為縱軸玻淑。彈性項目從上向下垂直排列。
• column-reverse：把主軸設(shè)為縱軸呀伙，彈性項目從下向上垂直排列补履。

3. flex-wrap

flex-wrap 設(shè)置彈性項目換行方式

定義
flex-wrap用于定義彈性項目是否換行及換行方式。

語法

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap: 默認值剿另。不換行箫锤。所有彈性項目顯示在一行內(nèi)。
• wrap: 換行雨女。彈性項目向垂直軸終點方向換行谚攒。
• wrap-reverse: 換行。彈性項目向垂直軸起點方向換行氛堕。

4. justify-content

justify-content 定義主軸排列方式

定義
justify-content用于定義彈性項目沿主軸的排列方式馏臭。

語法

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

• flex-start: 默認值。彈性項目向主軸起點堆積讼稚。
• flex-end：彈性項目向主軸終點堆積括儒。
• center : 彈性項目向主軸中心堆積。
• space-between：空白均勻分布在任意兩個彈性項目之間锐想。（第一個彈性項目在主軸起點帮寻，最后一個彈性項目在主軸終點）
• space-around：空白均勻分布在每個彈性項目兩側(cè)。
• space-evenly： 空白平均分布在任意兩個彈性項目之間赠摇。（包括首尾彈性項目）

5. align-items

align-items 定義垂直軸的行內(nèi)排列方式

定義
align-items 用于定義彈性項目沿垂直軸的行內(nèi)排列方式规婆。

語法

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

• stretch ： 默認值，拉伸彈性項目的高度蝉稳，填充彈性容器的高。
• flex-start: 讓彈性項目在當(dāng)前行內(nèi)向垂直軸起點堆積掘鄙。
• flex-end: 讓彈性項目在當(dāng)前行內(nèi)向垂直軸終點堆積耘戚。
• center：讓彈性項目在當(dāng)前行內(nèi)向垂直軸中點堆積。
• baseline: 讓彈性項目在當(dāng)前行內(nèi)向?qū)R到基線操漠。

6. align-content

align-content 定義垂直軸的排列方式

定義
align-content用于定義彈性項目沿垂直軸的排列方式收津。

語法

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

• normal: 彈性項目被堆積在它們的默認位置浊伙，就好像沒有設(shè)置 align-content 值一樣撞秋。
• flex-start: 默認值。彈性項目向垂直軸起點堆積嚣鄙。
• flex-end：彈性項目向垂直軸終點堆積吻贿。
• center : 彈性項目向垂直軸中心堆積。
• space-between：空白均勻分布在任意兩個彈性項目之間哑子。（第一個彈性項目在垂直軸起點舅列，最后一個彈性項目在垂直軸終點）
• space-around：空白均勻分布在每個彈性項目兩側(cè)肌割。
• space-evenly： 空白平均分布在任意兩個彈性項目之間。（包括首尾彈性項目）

注意：該屬性只對多行彈性容器生效帐要，即flex-wrap 設(shè)置為 wrap 或 wrap-reverse把敞。單行彈性容器無效，即 flex-wrap 設(shè)置為no-wrap榨惠。

7. gap屬性

gap 設(shè)置彈性項目之間的空白

定義
gap屬性用控制彈性項目之間的空白大小奋早。

語法

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

注意：1. 該屬性僅控制非邊緣彈性項目耽装。（不控制第一個和最后一個彈性項目） 2.只有當(dāng)該空白變得足夠小時，間距才會生效简烤。

子元素屬性

1. order屬性

2. flex-grow屬性

3. flex-shrink屬性

4. flex-basis屬性

5. align-item屬性

6. flex屬性