彈性盒簡介
1、基本概念
彈性盒
flex（彈性盒、伸縮盒）
- 是
css中的又一種布局手段，它主要用來代替浮動來完成頁面的布局 flex可以使元素具有彈性，讓元素可以跟隨頁面的大小的改變而改變
彈性容器
要使用彈性盒，必須先將一個元素設置為彈性容器
我們通過display 來設置彈性容器
display:flex設置為塊級彈性容器display:inline-flex設置為行內的彈性容器
/* 設置彈性容器 */
display: flex;
彈性元素
彈性容器的子元素是彈性元素（彈性項）
彈性元素可以同時是彈性容器
2、彈性容器的屬性
主軸與側軸
- 主軸：彈性元素的排列方向稱為主軸
- 側軸：與主軸垂直方向的稱為側軸
主軸屬性
排列方式
flex-direction 指定容器中彈性元素的排列方式
row默認值，彈性元素在容器中水平排列（自左向右）row-reverse彈性元素在容器中反向水平排列（自右向左）column彈性元素縱向排列（自上向下）column-reverse彈性元素反向縱向排列（自下向上）
/* 設置彈性元素排列方式 */
flex-direction: column;
自動換行
flex-wrap 設置彈性元素是否在彈性容器中自動換行
nowrap默認值，元素不會自動換行wrap元素沿着輔軸方向自動換行
/* 設置彈性元素排列方式 */
flex-direction: row;
/* 設置自動換行 */
flex-wrap: wrap;
簡寫屬性
flex-flow 是wrap和direction的簡寫屬性
/* 簡寫屬性 */
flex-flow: row wrap;
空白空間
justify-content 如何分配主軸上的空白空間（主軸上的元素如何排列）
-
flex-start元素沿着主軸起邊排列
-
flex-end元素沿着主軸終邊排列
-
center元素居中排列
-
space-around空白分布到元素兩側
-
space-between空白均勻分布到元素間
-
space-evenly空白分布到元素的單側
輔軸屬性
輔軸對齊
align-items元素在輔軸上如何對齊
-
stretch默認值，將元素的長度設置為相同的值
-
flex-start元素不會拉伸，沿着輔軸起邊對齊
-
flex-end沿着輔軸的終邊對齊
-
center居中對齊
-
baseline基線對齊
空白空間
align-content 如何分配輔軸上的空白空間（輔軸上的元素如何排列）
-
flex-start元素沿着輔軸起邊排列
-
flex-end元素沿着輔軸終邊排列
-
center元素居中排列
-
space-around空白分布到元素兩側
-
space-between空白均勻分布到元素間
-
space-evenly空白分布到元素的單側
彈性居中
利用彈性盒對元素進行水平垂直雙方向居中
justify-content: center;
align-items: center;
3、彈性元素的屬性
伸展系數
flex-grow 指定彈性元素的伸展系數，默認值為 0
- 當父元素有多余空間的時，子元素如何伸展
- 父元素的剩余空間，會按照比例進行分配
li:nth-child(1) {
background-color: #bfa;
flex-grow: 1;
}
li:nth-child(2) {
background-color: red;
flex-grow: 2;
}
li:nth-child(3) {
background-color: green;
flex-grow: 3;
}
縮減系數
flex-shrink 指定彈性元素的收縮系數，默認值為 1
- 當父元素中的空間不足以容納所有的子元素時，如何對子元素進行收縮
- 縮減系數的計算方式比較復雜，縮減多少是根據 縮減系數 和 元素大小 來計算
li:nth-child(1) {
background-color: #bfa;
flex-shrink: 1;
}
li:nth-child(2) {
background-color: red;
flex-shrink: 2;
}
li:nth-child(3) {
background-color: green;
flex-shrink: 3;
}
基礎長度
flex-basis 指定的是元素在主軸上的基礎長度
- 如果主軸是橫向的，則該值指定的就是元素的寬度
- 如果主軸是縱向的，則該值指定的就是元素的高度
- 默認值是
auto，表示參考元素自身的高度或寬度 - 如果傳遞了一個具體的數值，則以該值為准
li:nth-child(1) {
background-color: #bfa;
flex-basis: 200px;
}
簡寫屬性
flex可以設置彈性元素所有的三個樣式 flex: 增長 縮減 基礎
initial：flex: 0 1 autoauto：flex: 1 1 autonone：flex: 0 0 auto彈性元素沒有彈性
排列順序
order 決定彈性元素的排列順序
li:nth-child(1) {
background-color: #bfa;
order: 2;
}
li:nth-child(2) {
background-color: red;
order: 3;
}
li:nth-child(3) {
background-color: green;
order: 1;
}
覆蓋輔軸
align-self 用來覆蓋當前彈性元素上的align-items
li:nth-child(1) {
background-color: #bfa;
align-self: flex-end;
}
