導(dǎo)讀
- Flexbox背景 / 起源
- 基礎(chǔ)概念 （重點(diǎn)）
- 彈性容器 （重點(diǎn)）
- 彈性項(xiàng)目 （重點(diǎn)）
Flexbox
2017年十月，w3c推薦使用Flexbox模塊寫(xiě)布局带兜。
在此之前我們的布局有三種：
- 浮動(dòng)布局
- 流動(dòng)布局
- 定位布局
以上三種的共同點(diǎn)是：基于元素方向任柜。
- 塊元素：自上而下
- 行內(nèi)元素：自左而右
- 在布局的時(shí)候卒废，父元素對(duì)子元素幾乎沒(méi)有什么掌控力。這句話是說(shuō)：在布局方面宙地，父子元素之間的關(guān)系不夠緊密
Flexbox的目的
為各種限時(shí)設(shè)備和屏幕尺寸提供一種更高效的布局方式摔认，來(lái)處理元素的布局及元素之間的空間。
核心思想
賦予父元素一種超能力宅粥，讓父元素具有改變子元素的能力：
- 改變子元素的尺寸
- 改變子元素的位置
- 改變子元素的排序
- 改變子元素之間的空白
'彈性盒模型' - 彈性盒模型指的是一套css屬性規(guī)則参袱，不是一個(gè)css屬性，具體來(lái)說(shuō)秽梅，分為兩組：
- 彈性容器屬性
-
彈性項(xiàng)目屬性
222.png
彈性容器 ：被設(shè)置了display：flex的元素成為彈性容器抹蚀。彈性容器對(duì)子元素有掌控力。
彈性項(xiàng)目： 彈性容器的子元素被稱(chē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)布局高度坍塌的問(wèn)題：
解決高度塌陷的四種方法：
- BFC
- clear
- 使用偽類(lèi)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全稱(chēng) (Block Formatting Context) 塊級(jí)格式化環(huán)境
元素開(kāi)啟BFC的特點(diǎn):
1初狰、開(kāi)啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋
2、開(kāi)啟BFC的元素子元素和父元素外邊距不會(huì)重疊
3筝闹、開(kāi)啟BFC的元素可以包含子元素
開(kāi)啟BFC的方式:
1、設(shè)置元素的浮動(dòng)
2关顷、將元素設(shè)置為行內(nèi)塊元素
3武福、將元素的overflow設(shè)置為一個(gè)非visible的值
（常用的方式為元素設(shè)置overflow：hidden開(kāi)啟BFC）
