CSS弹性盒模型
文章目錄
- 1.彈性布局與傳統(tǒng)布局相應(yīng)對比
- 2.聲明彈性盒子
- 3.彈性元素
- 4.彈性元素方向
- `flex-direction:`
- 5.彈性元素溢出換行
- `flex-wrap:`
- 6.統(tǒng)一設(shè)置方向和換行
- `flex-flow: flex-direction flex-wrap`
- 7.軸的概念
- （1）水平排列
- （2）垂直排列
- 8.排列方式
- （1）主軸元素的多種排列方式
- `justify-content:`
- （2）交叉軸元素的多種排列方式
- `align-items:`
- （3）多行元素在交叉軸的排列方式
- `align-content:`
- （4）單個元素在交叉軸的排列方式
- `align-self:`
- 9.彈性元素可用空間分配
- `flex-grow:`
- 10.彈性元素動態(tài)縮小
- `flex-shrink:`
- 11.主軸的基準(zhǔn)尺寸的定義
- `flex-basis:`
- 12.彈性元素組合規(guī)則定義
- `flex:flex-grow flex-shrink flex-basis`
- 13.控制彈性元素的排序
- `order:`
- 14.定位元素在彈性布局中的表現(xiàn)
- （1）絕對定位
- （2）相對定位
- 15.彈性布局中使用`margin`自動撐滿空間
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，可以輕松的控制元素排列、對齊和順序。
現(xiàn)在的終端類型非常多，使用彈性盒模型可以讓元素在不同尺寸終端控制尺寸。
1.彈性布局與傳統(tǒng)布局相應(yīng)對比
<body><main><nav>Yooo</nav><article>Alison</article></main> </body>傳統(tǒng)布局：
* {padding: 0;margin: 0; }main {position: relative;height: 100vh; }main nav {width: 80px;position: absolute;left: 0;top: 0;bottom: 0;background: blueviolet; }main article {background: #ccc;padding-left: 90px;background-clip: content-box;height: 100vh; }彈性布局（代碼量減小）：
* {padding: 0;margin: 0; }main {display: flex;height: 100vh; }main nav {background: blueviolet;width: 80px; }main article {background: #ddd;flex: 1; }2.聲明彈性盒子
display:flex 塊級彈性盒子
display:inline-flex 行級彈性盒子
3.彈性元素
放在容器盒子中的元素即為彈性元素（包括文本）。
- 不能使用float與clear規(guī)則
- 彈性元素均為塊元素
- 絕對定位的彈性元素不參與彈性布局
4.彈性元素方向
flex-direction:
| row | 從左到右水平排列元素（默認(rèn)值） |
| row-reverse | 從右向左排列元素 |
| column | 從上到下垂直排列元素 |
| column-reverse | 從下到上垂直排列元素 |
5.彈性元素溢出換行
flex-wrap:
flex-wrap 屬性規(guī)定flex容器是單行或者多行。
| nowrap | 壓縮，元素不拆行或不拆列（默認(rèn)值） |
| wrap | 容器元素在必要的時候拆行或拆列。 |
| wrap-reverse | 容器元素在必要的時候拆行或拆列，但是以相反的順序 |
6.統(tǒng)一設(shè)置方向和換行
flex-flow: flex-direction flex-wrap
article {display: flex;width: 280px;margin: 50px;border: solid 5px blueviolet;/* flex-direction: row;flex-wrap: wrap; */flex-flow: row wrap; }7.軸的概念
主軸：沿著原本排列方向的那條軸。
副軸（交叉軸）：原本排列方向內(nèi)容溢出換行后與主軸垂直的軸。
（1）水平排列
（2）垂直排列
8.排列方式
（1）主軸元素的多種排列方式
justify-content:
| flex-start | 元素緊靠主軸起點 |
| flex-end | 元素緊靠主軸終點 |
| center | 元素從彈性容器中心開始 |
| space-between | 第一個元素靠起點，最后一個元素靠終點，余下元素平均分配空間 |
| space-around | 每個元素兩側(cè)的間隔相等。所以，元素之間的間隔比元素與容器的邊距的間隔大一倍 |
| space-evenly | 元素間距離平均分配 |
（2）交叉軸元素的多種排列方式
align-items:
控制元素在交叉軸的行上的排列
| stretch | 元素被拉伸以適應(yīng)容器（默認(rèn)值） |
| center | 元素位于容器的中心 |
| flex-start | 元素位于容器的交叉軸開頭 |
| flex-end | 元素位于容器的交叉軸結(jié)尾 |
如果設(shè)置了 width | height | min-height | min-width | max-width | max-height ，將影響stretch 的結(jié)果，因為 stretch 優(yōu)先級低于寬高設(shè)置。
article {display: flex;width: 550px;height: 550px;margin: 50px;border: solid 5px blueviolet;flex-direction: row;justify-content: center;align-items: center; }（3）多行元素在交叉軸的排列方式
align-content:
只適用于多行顯示的彈性容器，用于控制行（而不是元素）在交叉軸上的排列方式。
| stretch | 將空間平均分配給元素 |
| flex-start | 元素緊靠主軸起點 |
| flex-end | 元素緊靠主軸終點 |
| center | 元素從彈性容器中心開始 |
| space-between | 第一個元素靠起點，最后一個元素靠終點，余下元素平均分配空間 |
| space-around | 每個元素兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍 |
| space-evenly | 元素間距離平均分配 |
（4）單個元素在交叉軸的排列方式
align-self:
用于控制單個元素在交叉軸上的排列方式，align-items 用于控制容器中所有元素的排列，而 align-self 用于控制一個彈性元素的交叉軸排列。
| stretch | 將空間平均分配給元素 |
| flex-start | 元素緊靠主軸起點 |
| flex-end | 元素緊靠主軸終點 |
| center | 元素從彈性容器中心開始 |
9.彈性元素可用空間分配
flex-grow:
用于將彈性盒子的可用空間，分配給彈性元素。可以使用整數(shù)或小數(shù)聲明。（計算：剩余的空間按照比例平分）
article div:nth-child(1) {flex-grow: 0; }article div:nth-child(2) {flex-grow: 1; }article div:nth-child(3) {flex-grow: 3; }10.彈性元素動態(tài)縮小
flex-shrink:
與 flex-grow 相反 flex-shrink 是在彈性盒子裝不下元素時定義的縮小值。
article div:nth-child(1) {flex-shrink: 0; }article div:nth-child(2) {flex-shrink: 1; }article div:nth-child(3) {flex-shrink: 3; }11.主軸的基準(zhǔn)尺寸的定義
flex-basis:
flex-basis 屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。
優(yōu)先級：max-width(height)/min-width(height)>flex-basis>width/height
article * {flex-basis: 100px;width: 100px;height: 50px;background: red;background-clip: content-box;padding: 10px;box-sizing: border-box;font-size: 35px;color: white;border: solid 1px blueviolet; }12.彈性元素組合規(guī)則定義
flex:flex-grow flex-shrink flex-basis
13.控制彈性元素的排序
order:
用于控制彈性元素的位置，默認(rèn)為 order:0 。數(shù)值越小越在前面，可以負(fù)數(shù)或整數(shù)。
article :nth-child(1) {order: 1; }article :nth-child(2) {order: 2; }article :nth-child(3) {order: -5; }14.定位元素在彈性布局中的表現(xiàn)
（1）絕對定位
絕對定位的彈性元素不參與彈性布局
article :nth-child(1) {background-color: #000;position: absolute;left: 100px;top: 200px; }（2）相對定位
相對定位的元素因為保留位置，所以參與布局。
article :nth-child(1) {background-color: #000;position: relative; }15.彈性布局中使用margin自動撐滿空間
在彈性布局中對彈性盒子使用margin-right:auto 等形式可以自動撐滿空間。
ul:nth-child(1) {display: flex;/* 讓菜單ul自動填滿右側(cè) */margin-right: auto; }總結(jié)
- 上一篇： CSS实现div滑入效果
- 下一篇： CSS轮播图中小圆点的定位问题