導(dǎo)讀

• Flexbox背景 / 起源
• 基礎(chǔ)概念 （重點(diǎn)）
• 彈性容器 （重點(diǎn)）
• 彈性項(xiàng)目 （重點(diǎn)）

Flexbox

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

• 浮動(dòng)布局
• 流動(dòng)布局
• 定位布局

以上三種的共同點(diǎn)是：基于元素方向。

• 塊元素：自上而下
• 行內(nèi)元素：自左而右
• 在布局的時(shí)候，父元素對(duì)子元素幾乎沒有什么掌控力。這句話是說：在布局方面，父子元素之間的關(guān)系不夠緊密

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

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

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

'彈性盒模型' - 彈性盒模型指的是一套css屬性規(guī)則，不是一個(gè)css屬性，具體來說，分為兩組：

• 彈性容器屬性

• 彈性項(xiàng)目屬性

  
  
  222.png

彈性容器 ：被設(shè)置了display：flex的元素成為彈性容器。彈性容器對(duì)子元素有掌控力。
彈性項(xiàng)目： 彈性容器的子元素被稱為彈性項(xiàng)目。彈性項(xiàng)目受到父元素的控制

主軸： 彈性項(xiàng)目排列的軸.彈性項(xiàng)目從主軸起點(diǎn)向主軸終點(diǎn)排列。
垂直軸：垂直于主軸的軸就是垂直軸，多行彈性項(xiàng)目沿垂直軸排列。

主軸起點(diǎn)：多個(gè)彈性項(xiàng)目沿主軸分布的起始點(diǎn)
主軸終點(diǎn)：多個(gè)彈性項(xiàng)目沿主軸分布的終點(diǎn)

垂直軸起點(diǎn)：多行彈性項(xiàng)目沿垂直軸分布的起點(diǎn)
垂直軸終點(diǎn)：多行彈性項(xiàng)目沿垂直軸分布的終點(diǎn)

1.display

[圖片上傳失敗...(image-bb0d62-1668050962103)]
定義：用于定義彈性容器。
語(yǔ)法：

.container{
display:flex | inline-flex
}

屬性值：

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

2.flex-wrap

[圖片上傳失敗...(image-60b487-1668050962103)]
定義：用于定義折行方式。
語(yǔ)法：

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

屬性值：

• nowrap：不換行，所有彈性項(xiàng)目顯示在一行內(nèi)。（默認(rèn)值）
• wrap：向垂直軸終點(diǎn)換行。彈性項(xiàng)目會(huì)根據(jù)容器的寬度自動(dòng)換行。
• wrap-reverse ：垂直軸起點(diǎn)換行。彈性項(xiàng)目會(huì)根據(jù)容器的寬度自動(dòng)換行。

3.flex-direction

[圖片上傳失敗...(image-fe69b2-1668050962103)]
定義：用于設(shè)置彈性盒模型的主軸的方向.主軸方向就是元素的排列方式。
語(yǔ)法：

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

屬性值：

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

4.justify-content

justify:調(diào)整
[圖片上傳失敗...(image-c64d0b-1668050962103)]
定義：用于設(shè)置彈性項(xiàng)目的排列方式。
語(yǔ)法：

.contaienr{
justify-content:flex-start | flex-end | conter | space-between | space-around | space-evenly
}

• flex-start:彈性項(xiàng)目從主軸起點(diǎn)向終點(diǎn)排列
• flex-end : 彈性項(xiàng)目從主軸終點(diǎn)向起點(diǎn)排列 （順序不變）
• conter ：把彈性項(xiàng)目沿著主軸居中排列
• space-between ：彈性項(xiàng)目在項(xiàng)目與項(xiàng)目之間平均分布剩余空間。
• space-around ： 把剩余空間平均分布到彈性項(xiàng)目的兩側(cè)。
• space-evenly ：把剩余空間平均分布到彈性項(xiàng)目之間（任意兩個(gè)彈性項(xiàng)目之間的空白是相等的。）

5.align-items

[圖片上傳失敗...(image-c8b969-1668050962103)]
定義：align-items用于設(shè)置沿著垂直軸的對(duì)齊方式。
語(yǔ)法：

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

屬性值：

• flex-start ：彈性項(xiàng)目垂直對(duì)齊容器的起點(diǎn)位置。
• flex-end ：彈性項(xiàng)目垂直對(duì)齊容器的終點(diǎn)位置。
• conter ：彈性項(xiàng)目在彈性容器里居中對(duì)齊。
• stretch ：默認(rèn)。拉伸子元素的高度，彈性項(xiàng)目被拉伸以適合容器。
• baseline ：彈性項(xiàng)目對(duì)齊到容器的基線。

6.align-content

[圖片上傳失敗...(image-159a94-1668050962103)]
定義：設(shè)置彈性項(xiàng)目沿垂直軸的分布方式 / 對(duì)齊方式
語(yǔ)法：

.container{
align-content: stretch | center | flex-start | flex-end | space-between |space-around | initial | inherit;
}

屬性值：

• normal:默認(rèn)
• stretch：拉伸到彈性容器的高度
• center：讓彈性項(xiàng)目沿著垂直軸居中對(duì)齊
• flex-start：讓彈性項(xiàng)目對(duì)齊到垂直軸的起點(diǎn)位置
• flex-end ：讓彈性項(xiàng)目對(duì)齊到垂直軸的終點(diǎn)位置
• space-between ：剩余空間均勻分布在彈性項(xiàng)目?jī)蓚?cè)，兩端各占一半
• space-around ： 剩余空間均勻分布在彈性項(xiàng)目之間。

7.gap

[圖片上傳失敗...(image-8429b3-1668050962103)]
定義：用于控制彈性項(xiàng)目之前的空白大小
該屬性僅僅控制非邊緣彈性項(xiàng)目（不控制第一個(gè)和最后一個(gè)）
語(yǔ)法：

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

屬性值：

• 一個(gè)值 ：控制水平空白
• 兩個(gè)值：控制水平和垂直間距

8.order

定義：屬性規(guī)定彈性項(xiàng)目相對(duì)于同一容器內(nèi)其余彈性項(xiàng)目的順序。
屬性值：number默認(rèn)值為 0。規(guī)定彈性項(xiàng)目的順序。

注：屬性值越大，排行越靠后。

9.flex-grow

屬性值：規(guī)定項(xiàng)目相對(duì)于其余項(xiàng)目的增量。 |

• 1、flex-grow指擴(kuò)展flex子項(xiàng)所占據(jù)的寬度，擴(kuò)展的空間就是除去元素外剩余的空白間隙。

• 2、不支持負(fù)值，默認(rèn)值是0，表示不占用剩余的空白間隙擴(kuò)展自己的寬度。

• 3、如果flex-grow大于0，則flex容器剩余空間的分配就會(huì)發(fā)生。

10.flex-shrink

定義：flex-shrink 屬性固定在相同的容器中，項(xiàng)目相對(duì)于其余彈性項(xiàng)目的收縮量。
屬性值：number 數(shù)字，規(guī)定項(xiàng)目相對(duì)于其余彈性項(xiàng)目的收縮量。默認(rèn)值為 1。

11.flex-basis

定義：屬性規(guī)定彈性項(xiàng)目的初始長(zhǎng)度。
屬性值：

• number 長(zhǎng)度單位或百分百，規(guī)定彈性項(xiàng)目的初始長(zhǎng)度。
• auto 默認(rèn)值。長(zhǎng)度等于彈性項(xiàng)目的長(zhǎng)度。如果該項(xiàng)目未規(guī)定長(zhǎng)度，則長(zhǎng)度將依據(jù)其內(nèi)容。

解決浮動(dòng)布局高度坍塌的問題：

解決高度塌陷的四種方法：

• BFC
• clear
• 使用偽類after
• clearfix

12.復(fù)合屬性flex

語(yǔ)法：

.container{
flex: flex-grow flex-sheink flex-basis 
   /* flex: 0 1 auto； */
}

屬性值：

• flex:1;/如果只有一個(gè)值，表示flex-grow/
• flex: 50px;

• flex: 50%;
  

• flex: 20rem;/*如果有單位則指向 flex-basis*/  
  

一、BFC全稱 (Block Formatting Context) 塊級(jí)格式化環(huán)境
元素開啟BFC的特點(diǎn):
1、開啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋
2、開啟BFC的元素子元素和父元素外邊距不會(huì)重疊
3、開啟BFC的元素可以包含子元素

開啟BFC的方式:
1、設(shè)置元素的浮動(dòng)
2、將元素設(shè)置為行內(nèi)塊元素
3、將元素的overflow設(shè)置為一個(gè)非visible的值
（常用的方式為元素設(shè)置overflow：hidden開啟BFC）