弹性盒模型
一、flex（彈性盒、伸縮盒）
彈性盒子是CSS3的一種新的布局格式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
- 是css中的一種布局手段，它主要用來代替浮動來完成頁面的布局
- flex可以使用是元素具有彈性，讓元素可以跟隨頁面的大小的改變而改變
1、彈性容器
直接使用display：flex；
2、彈性元素
把父元素設置為彈性容器之后，那么他的直接子元素（注意只有子元素）就會自動變成彈性元素。彈性元素可以同時是彈性容器也是彈性元素。
3、彈性盒子屬性值
inline-flex：彈性盒子與非彈性盒子在同一行顯示（規定彈性盒子為行內塊元素）
flex：彈性盒子與非彈性盒子不在同一行顯示（規定彈性盒子為塊元素）
inline-flex會讓后面的內容與之在一行顯示，但flex是獨占一行
二、屬性解析
1、flex-grow
指定彈性元素的伸展的系數（寫在子元素里面的）當父元素有多余的空間時，子元素如何伸展父元素和按照比例進行分配（默認為0）
2、flex-shrink
指定彈性元素的收縮系（給子元素的）當父元素的空間不足以容納所有的子元素的時候，對子元素進行收縮。默認為1，當為0時就會溢出。
3、flex-wrap
設置彈性元素是否在彈性容器中自動換行（給父元素）；屬性值：nowrap[默認值】，不會換行。
????????wrap：元素沿輔軸方向換行
????????wrap-reverse:元素沿著輔軸反方向換行
4、flex-direction
設置指定容器彈性元素的排列方式（給父元素），設置主軸和輔軸方向。
屬性值：row? ? ? ? ?默認值，彈性元素在容器中水平排列（自左向右）
? ? ? ? ? ? ? ? row-reverse:彈性元素在容器中反方向排列（自右向左）
? ? ? ? ? ? ? ? column：彈性元素縱向排列（自上向下）
? ? ? ? ? ? ? ? column-reverse：彈性元素反向縱向排列（自下向上）
5、flex-flow
是flex-wrap和flex-direction的簡寫屬性，eg：flex-flow：row?wrap；意思是元素在一行顯示，并且會自動換行，二者之間沒有順序。
6、justify-content
用于設置元素的排列方式，如何分配主軸上的空白空間（主軸上的元素如何排列），屬性值都是在父元素盒子里面寫的。
| flex-star | 元素沿主軸起點排列（默認值） |
| flex-end | 元素沿著終點排列 |
| center | 元素居中排列 |
| space-around | 空白分布到元素兩側 |
| space-between | 空白均勻分布到元素之間 |
| space-evenly | 空白分布到元素的單側 |
7、align-content 軸空間的分布（給父元素）
| center | 元素在中間，上下空間分布一樣 |
| flex-start | 元素在上邊，空間分布 |
| flex-end | 元素分布在下面，空白分布在上面 |
| space-around | 空白分布在兩邊 |
| space-between | 空白分布在元素的中間 |
8、align-items 設置元素在輔軸上如何對齊，元素之間的關系（給父元素的）
| stretch | 默認值 |
| flex-start | 元素不會拉伸，沿著輔軸的起點對齊 |
| flex-end | 元素不會拉伸，沿著輔軸的重點對齊 |
| center | 居中對齊 |
| baseline | 基線對齊 |
9、align-self （給子元素）
一般是使用在單個元素上面來覆蓋align-items屬性的，所以align-self的屬性值和align-items的屬性值是一樣的。
10、flex-basis （給子元素）
指定元素在主軸上的基礎長度，如果主軸是縱向的，則該指定的就是元素的高度。默認值為auto，表示參考元素自身的高度或寬度，如果傳遞的是一個具體的數值，則以該值為準。
11、flex（給子元素）
三個彈性元素的簡寫法：
??????? flex：flex-grow flex-shrink flex-basis（增長 縮減 基礎）
屬性值：
initial??????? 相當于flex：0 1 auto
auto??????? 相當于flex：1 1 auto
none??????? 相當于flex：0 0 auto??????? 元素沒有彈性
12、order（給子元素）
決定彈性元素的排列順序，屬性值為自然數
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彈性容器和彈性元素</title><style>/* 彈性容器-針對盒子 */.box {width: 400px;border: 2px solid red;/* 使用了flex里面的元素自動一行顯示 */display: flex;}.box div {/* 彈性元素 */flex-grow: 1;width: 100px;height: 100px;}.box div:nth-child(odd) {background-color: pink;}.box div:nth-child(even) {background-color: skyblue;}</style> </head><body><!-- 彈性容器 --><div class="box"><div>1</div><div>2</div><div>3</div></div> </body></html>總結
- 上一篇： 弹性盒子（Flex Box）模型
- 下一篇： IOS公众账号，点击select事件没有