flexbox所有主流浏览器均支持
在PC设备上，IE8/9不支持，IE10支持有不少问题
在Mobile设备上，可以正常使用
flexbox语法问题
flexbox由于历史原因，出现了多个语法版本，我们可以通过使用autoprefixer来跟踪最新的浏览器版本，自动化生产前缀
/* 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. 我们可以很轻松的实现元素的水平垂直居中
<div class="container">
<div class="inner">CSS里总算是有了一种简单的垂直居中布局的方法了</div>
</div>
.container { display: flex; background-color: red;}
.container .inner { margin: auto; background-color: blue; }
水平垂直居中
当然水平垂直居中还有其他的方式
2. flexbox等分/不等分布局
异常灵活的布局方式，并且不用担心相邻内联元素之间的空白间距问题
- flexbox等分布局
.flex-container { display: flex; }
.flex-item { flex: 1; //表示子元素之间平均分配 }
二等分
一等分
- flexbox不等分布局
nav { width: 200px; /*固定宽度*/ }
.container { display: flex; }
.content{ flex: 1; }
不等分布局
3. 实现内联元素均匀分布
.flex-container {
display: flex;
justify-content: space-around;
}
均匀分布
.flex-container {
display: flex;
justify-content: space-between;
}
无边距均匀分布
当让还有更多的特性需要去学习，这儿仅抛砖引玉
