導(dǎo)讀
- Flexbox背景
- 基礎(chǔ)概念（重點(diǎn)）
- 彈性容器屬性（重點(diǎn)）
- 彈性項(xiàng)目屬性（重點(diǎn)）
Flexbox
2017年10月交煞，W3c推薦使用Flexbox模塊寫布局
在此之前，我們的布局模型有三種
- 流動(dòng)布局
- 浮動(dòng)布局
- 定位布局
以上布局的共同點(diǎn)：偏向元素 - 塊級(jí)元素 ：自上而下
- 行內(nèi)元素：自左而右
在布局的時(shí)候状土，父元素幾乎沒(méi)有什么掌控力琼开，這句話的意思是說(shuō)，在布局方面枚抵，父元素之間的關(guān)系不夠緊密
Flexbox的目的
為個(gè)種顯示設(shè)備是屏幕尺寸提供一種更高效是布局方式，來(lái)處理元素的布局以及元素之間的空間
核心思想
賦予父元素一種超能力赠幕，讓父元素具有改變子元素的能力 - 改變子元素的尺寸
- 改變子元素的位置
- 改變子元素的排序
- 改變子元素之間的空白
圖片.png
彈性容器- 彈性盒模型他指是一套css屬性規(guī)則俄精，而不是一個(gè)Css屬性询筏，具體來(lái)說(shuō)榕堰，分為倆組屬性 - 彈性盒模型屬性
- 彈性項(xiàng)目屬性
彈性容器- 被設(shè)置了display:flex的元素成為彈性容器。彈性容器對(duì)元素有掌控力
彈性項(xià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-a543b-1668163573232)]
定義
Display屬性用于定義彈性容器。
語(yǔ)法
.container{
display:flex | inline-flex;
}
- flex : 塊級(jí)彈性容器
- inline-flex: 行內(nèi)塊級(jí)彈性容器
2.flex-wrap
[圖片上傳失敗...(image-26bbf7-1668163573232)]
定義：
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-5be6db-1668163573232)]
定義
用于設(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-d81c42-1668163573232)]
定義
用于設(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-33f64f-1668163573232)]
定義
align-items用設(shè)置彈性項(xiàng)目沿垂直軸的對(duì)齊方式光坝。
語(yǔ)法
.container{
align-items: flex-start | flex-end | center | stretch | baseline
}
- tretch ： 默認(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
定義
設(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)目之間的空白是相等
7.gan 屬性
[圖片上傳失敗...(image-c1f860-1668163573232)]
定義
gap屬性用控制彈性項(xiàng)目之間的空白大小。注意：該屬性僅控制非邊緣彈性項(xiàng)目理张。（不控制第一個(gè)和最后一個(gè)彈性項(xiàng)目）
語(yǔ)法
.container{
gap: 10px赫蛇；/*單行：控制水平間距*/
gap: 10px；/*單行：控制水平和垂直間距*/
gap: 10px 20px; /* 水平間距 垂直間距*/
}
如何開啟彈性盒模型布局
在父級(jí)樣式中添加:display: flex;或者display: inline-flex;雾叭。其子元素則可按照彈性盒模型的規(guī)則進(jìn)行布局悟耘。
flex-wrap
flex-wrap用于定義折行方式。
flex-direction
用于設(shè)置彈性盒模型的主軸方向织狐。主軸方向就是元素的排列方式暂幼。
gqp
gap屬性用控制彈性項(xiàng)目之間的空白大小。注意：該屬性僅控制非邊緣彈性項(xiàng)目
justify-content 加是t乏
用于設(shè)置彈性項(xiàng)目 主軸的排列方式移迫。
align-content
設(shè)置彈性項(xiàng)目沿垂直軸的分布方式/對(duì)齊方式旺嬉。
align-items
align-items用設(shè)置彈性項(xiàng)目沿行內(nèi)垂直軸的對(duì)齊方式。
