導(dǎo)讀

• Flexbox背景
• 基礎(chǔ)概念（重點）
• 彈性容器屬性（重點）
• 彈性項目屬性（重點）

Flexbox背景起源

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

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

Flexbox的目的

為各種顯示設(shè)備和屏幕尺寸提供一種更高效的布局方式，來處理元素的布局及元素之間的空間。

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

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

概念基礎(chǔ)

彈性盒模型.png

彈性盒模型 - 彈性盒模型它指是一套css屬性規(guī)則，而不是一個css屬性。具體來講，
分為兩組屬性：

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

彈性容器 - 被設(shè)置了display:flex的元素成為彈性容器。彈性容器對于子元素有掌控力。
彈性項目 - 彈性容器的子元素被稱為彈性項目。彈性項目受到父級元素的控制。

主軸 - 彈性項目排列的軸，多個彈性項目從主軸起點向主軸終點排列。
垂直軸 - 垂直于主軸的軸就是垂直軸

主軸起點 - 多個彈性項目沿主軸分布的起始點
主軸起點

垂直起點 - 多個彈性項目沿垂直軸分布的起始點
垂直起點

1.display:flex

[圖片上傳失敗...(image-be4da9-1668844991417)]

2.flex-wrap

[圖片上傳失敗...(image-11f9f4-1668844991417)]
定義
flex-wrap用于定義轉(zhuǎn)折的方式。

語法

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

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

3.flex-direction

[圖片上傳失敗...(image-338767-1668844991417)]
定義
用于設(shè)置彈性盒模型的主軸方向。

語法

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

• row：默認(rèn)值。彈性項目從左向右，從上向下排列。
• row-reverse：彈性項目從右向左，從上到下排列。
• column ：把主軸設(shè)為縱軸。彈性項目從上向下，從左向右排列。
  column-reverse：把主軸設(shè)為縱軸，彈性項目從下向上排，從左向右排列。

4.justify-content

[圖片上傳失敗...(image-a6d83d-1668844991417)]
定義
用于設(shè)置彈性項目的排列方式。

語法

.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

[圖片上傳失敗...(image-9977f9-1668844991417)]
定義
align-items用設(shè)置彈性項目沿垂直軸對齊方式
語法

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

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

6. align-content

[圖片上傳失敗...(image-6f77f6-1668844991417)]
定義

設(shè)置彈性項目沿垂直軸的分布方式/對齊方式。
語法

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

• normal
• flex-start: 彈性項目從垂直軸起點向終點排列。
• flex-end：彈性項目從垂直軸終點向垂直軸起點排列。（順序不變）
• center ：彈性項目沿垂直軸居中排列。
• stretch :彈性項目拉伸高度以適應(yīng)彈性容器。
• space-between : 彈性項目從垂直軸起點到終點均勻分布。
• space-around： 把空白平均分配到彈性項目兩側(cè)。
• space-evenly：把空白平均分配到彈性項目之間。（任意兩個彈性項目之間的空白是相等的）

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

7. gap屬性

[圖片上傳失敗...(image-c491c9-1668844991417)]
定義
gap屬性用控制彈性項目之間的空白大小。注意：該屬性僅控制非邊緣彈性項目。（不控制第一個和最后一個彈性項目）
語法

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