導(dǎo)讀
- Flexbox背景起源
- 基礎(chǔ)概念（重點(diǎn)）
- 彈性容器屬性（重點(diǎn)）
- 彈性項(xiàng)目屬性（重點(diǎn)）
Flexbox背景起源
2017年10月块仆，w3c推薦使用Flexbox模塊寫(xiě)布局藏古。
在此之前瓦糕，我們的布局模型有三種：
- 流動(dòng)布局
- 浮動(dòng)布局
- 定位布局
以上三種布局的共同特點(diǎn)：基于元素方向 - 塊元素：自上而下
- 行內(nèi)元素：自左而右
- 在布局的時(shí)候，父元素對(duì)子元素幾乎沒(méi)有什么掌控力，這句話的意思是說(shuō)腋寨，在布局方面，父子元素之間的關(guān)系不夠緊密化焕。
Flexbox的目的
為各種顯示設(shè)備和屏幕尺寸提供一種更高效的布局方式萄窜，來(lái)處理元素的布局以及元素之間的空間。
核心思想
賦予父元素一種超能力撒桨，讓父元素具有改變子元素的能力：
- 改變子元素的尺寸
- 改變子元素的位置
- 改變子元素的排序
- 改變子元素之間的空白
基礎(chǔ)概念
彈性盒模型- 彈性盒模型它指是一套css屬性規(guī)則查刻，而不是一個(gè)css屬性。具體來(lái)講元莫，分為兩組屬性
- 彈性容器屬性
- 彈性項(xiàng)目屬性
彈性容器 - 被設(shè)置了display:flex的元素成為彈性容器赖阻。彈性容器對(duì)子元素有掌控力。
彈性項(xiàng)目 - 彈性容器的子元素被稱(chēng)為彈性項(xiàng)目踱蠢。彈性項(xiàng)目受到父元素的控制火欧。
主軸 - 彈性項(xiàng)目排列的軸，多個(gè)彈性項(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-9965b9-1668937429981)]
定義
Display屬性用于定義彈性容器陡鹃。
語(yǔ)法
.container{
display:flex | inline-flex;
}
- flex : 塊級(jí)彈性容器
- inline-flex: 行內(nèi)塊級(jí)彈性容器
2. flex-wrap
[圖片上傳失敗...(image-fb9ed0-1668937429981)]
定義
flex-wrap用于定義折行方式。
語(yǔ)法
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap: 不換行抖坪。所有彈性項(xiàng)目顯示在一行內(nèi)萍鲸。默認(rèn)值。
- wrap: 向垂直軸終點(diǎn)方向換行擦俐。彈性項(xiàng)目根據(jù)彈性容器的寬度自動(dòng)換行脊阴。
- wrap-reverse: 向垂直軸起點(diǎn)方向換行。彈性項(xiàng)目根據(jù)彈性容器的寬度自動(dòng)換行蚯瞧。
3. flex-direction
[圖片上傳失敗...(image-de5579-1668937429982)]
定義
用于設(shè)置彈性盒模型的主軸方向嘿期。主軸方向就是元素的排列方式。
語(yǔ)法
.container{
flex-direction: row | row-reverse | column | column-reverse
}
- row: 默認(rèn)值埋合。把主軸設(shè)為水平軸备徐。彈性項(xiàng)目從左向右，從上向下排列甚颂。
- row-reverse：把主軸設(shè)為水平軸坦喘。彈性項(xiàng)目從右向左盲再，從上向下排列。
- column：把主軸設(shè)為縱軸瓣铣。彈性項(xiàng)目從上向下答朋，從左向右排列。
- column-reverse：把主軸設(shè)為縱軸棠笑，彈性項(xiàng)目從下向上排梦碗，從左向右排列。
4. justify-content
[圖片上傳失敗...(image-8f993-1668937429982)]
定義
用于設(shè)置彈性項(xiàng)目的排列方式蓖救。
語(yǔ)法
.container{
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
}
- flex-start: 彈性項(xiàng)目從主軸起點(diǎn)向終點(diǎn)排列洪规。
- flex-end：彈性項(xiàng)目從主軸終點(diǎn)向主軸起點(diǎn)排列。（順序不變）
- center : 彈性項(xiàng)目沿主軸居中排列循捺。
- space-between：彈性項(xiàng)目從主軸起點(diǎn)到主軸終點(diǎn)均勻分布斩例。
- space-around：把空白平均分配到彈性項(xiàng)目?jī)蓚?cè)。
- space-evenly： 把空白平均分配到彈性項(xiàng)目之間从橘。（任意兩個(gè)彈性項(xiàng)目之間的空白是相等的）
5. align-items
[圖片上傳失敗...(image-7a620d-1668937429982)]
定義
align-items用設(shè)置彈性項(xiàng)目沿垂直軸的對(duì)齊方式念赶。
語(yǔ)法
.container{
align-items: flex-start | flex-end | center | stretch | baseline
}
- stretch ： 默認(rèn)值，默認(rèn)拉伸子元素的高度
- flex-start: 讓彈性項(xiàng)目對(duì)齊到垂直軸起點(diǎn)恰力。
- flex-end: 讓彈性項(xiàng)目對(duì)齊到垂直軸終點(diǎn)叉谜。
- center：讓彈性項(xiàng)目沿垂直軸居中對(duì)齊。
- baseline: 讓彈性項(xiàng)目對(duì)齊到彈性項(xiàng)目的基線踩萎。
6. align-content
[圖片上傳失敗...(image-e3d2e6-1668937429982)]
定義
設(shè)置彈性項(xiàng)目沿垂直軸的分布方式/對(duì)齊方式停局。
語(yǔ)法
.container{
align-content: normal | flex-start | flex-end | center | stretch | space-between | space-around |space-evenly；
}
- normal
- flex-start: 彈性項(xiàng)目從垂直軸起點(diǎn)向終點(diǎn)排列香府。
- flex-end：彈性項(xiàng)目從垂直軸終點(diǎn)向垂直軸起點(diǎn)排列董栽。（順序不變）
- center ：彈性項(xiàng)目沿垂直軸居中排列。
- stretch :彈性項(xiàng)目拉伸高度以適應(yīng)彈性容器企孩。
- space-between : 彈性項(xiàng)目從垂直軸起點(diǎn)到終點(diǎn)均勻分布锭碳。
- space-around： 把空白平均分配到彈性項(xiàng)目?jī)蓚?cè)。
- space-evenly：把空白平均分配到彈性項(xiàng)目之間柠硕。（任意兩個(gè)彈性項(xiàng)目之間的空白是相等的）
- gap屬性
[圖片上傳失敗...(image-d5c61-1668937429982)]
定義
gap屬性用控制彈性項(xiàng)目之間的空白大小。注意：該屬性?xún)H控制非邊緣彈性項(xiàng)目运提。（不控制第一個(gè)和最后一個(gè)彈性項(xiàng)目）
語(yǔ)法
.container{
gap: 10px蝗柔；/*單行：控制水平間距*/
gap: 10px；/*單行：控制水平和垂直間距*/
gap: 10px 20px; /* 水平間距 垂直間距*/
}
ps:拜拜~
