CSS3 彈性盒子(Flexible Box 或 Flexbox)，是一種用於在頁面上佈置元素的佈局模式，使得當頁面佈局必須適應不同的屏幕尺寸和不同的顯示設備時，元素可預測地運行。對於許多應用程序，彈性盒子模型提供了對塊模型的改進，因爲它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。 ----摘自MDN 使用CSS彈性盒子
.box{
display: flex;
}
水平的主軸（main axis）的開始位置（與左邊邊框的交叉點）叫做main start，結束位置叫做main end；
垂直的側軸（cross axis）的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個項目佔據的主軸空間叫做main size，佔據的側軸空間叫做cross size。
屬性
容器盒子上的屬性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
- flex-direction
決定容器內項目的排列方向，即main axis方向，通俗的就是橫或豎
| row | 水平排列，起點（main start）在左端 |
| row-reverse | 水平排列，起點（main start）在右端 |
| column | 垂直排列，起點（main start）在上端 |
| column-reverse | 垂直排列，起點（main start）在下端 |
- flex-wrap
決定容器內項目是否換行
| nowrap | 不換行 |
| wrap | 換行，第一行在上方 |
| wrap-reverse | 換行，第一行在下方 |
- flex-flow
flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap
- justify-content
容器內項目在主軸方向的對齊方式
| flex-start | 左對齊 |
| flex-end | 右對齊 |
| center | 居中 |
| space-between | 兩端對齊，項目之間的間隔都相等 |
| space-around | 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍 |
- align-items
容器內項目在側軸方向對齊方式
| flex-start | 側軸頂端 |
| flex-end | 側軸底端對齊 |
| center | 居中，中點對齊 |
| baseline | 項目的第一行文字的基線對齊 |
| stretch（默認值） | 如果項目未設置高度或設爲auto，將佔滿整個容器的高度 |
- align-content
設置項目多根軸線對齊方式
| flex-start | 側軸頂端 |
| flex-end | 側軸底端對齊 |
| center | 居中，中點對齊 |
| space-between | 與交叉軸兩端對齊，軸線之間的間隔平均分佈。 |
| space-around | 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 |
| stretch（默認值） | 軸線佔滿整個交叉軸 |
容器內項目屬性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
- order
定義項目的排列順序。數值越小，排列越靠前，屬性值爲number類型，默認爲0
- flex-grow
定義項目的放大比例，屬性值爲number類型，默認是0，即如果存在剩餘空間，也不放大
- flex-shrink
定義項目的縮小比例，默認是1，即空間佈局，該項目將縮小。若一個項目flex-shrink屬性爲0，其他都爲1，則空間不足時，設爲0的不縮小（補充：只有元素寬度和大於父元素寬度時纔會縮小）。
- flex-basis
定義了在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的本來大小。
- flex
flex-grow， flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
- align-self
定義單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
兼容性
.flex{
display:box; （伸縮盒最老版本）
display:-webkit-box; /* iOS 6-, Safari 3.1-6 */
display:-webkit-flex; /* Chrome */
display:-moz-box; /* Firefox 19 */
display:-ms-flexbox;
display:flex; /*flex容器*/
}
//設置容器排列方向
.flex.flex_reverse {
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
//設置容器內項目flex放大比例
.flex-items{
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1
}
參考文章
