flexbox所有主流瀏覽器均支持
在PC設(shè)備上食听，IE8/9不支持，IE10支持有不少問題
在Mobile設(shè)備上污茵，可以正常使用
flexbox語法問題
flexbox由于歷史原因樱报，出現(xiàn)了多個語法版本，我們可以通過使用autoprefixer來跟蹤最新的瀏覽器版本泞当，自動化生產(chǎn)前綴
/* Write this */
.flex-container {
display: flex;
}
/* Compiles to this (with autoprefixer set to support last 2 versions of all browsers) */
.flex-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
常用的場景
1. 我們可以很輕松的實現(xiàn)元素的水平垂直居中
<div class="container">
<div class="inner">CSS里總算是有了一種簡單的垂直居中布局的方法了</div>
</div>
.container { display: flex; background-color: red;}
.container .inner { margin: auto; background-color: blue; }
水平垂直居中
當(dāng)然水平垂直居中還有其他的方式
2. flexbox等分/不等分布局
異常靈活的布局方式迹蛤，并且不用擔(dān)心相鄰內(nèi)聯(lián)元素之間的空白間距問題
- flexbox等分布局
.flex-container { display: flex; }
.flex-item { flex: 1; //表示子元素之間平均分配 }
二等分
一等分
- flexbox不等分布局
nav { width: 200px; /*固定寬度*/ }
.container { display: flex; }
.content{ flex: 1; }
不等分布局
3. 實現(xiàn)內(nèi)聯(lián)元素均勻分布
.flex-container {
display: flex;
justify-content: space-around;
}
均勻分布
.flex-container {
display: flex;
justify-content: space-between;
}
無邊距均勻分布
當(dāng)讓還有更多的特性需要去學(xué)習(xí)，這兒僅拋磚引玉
