flexbox可用性研究

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;
}

无边距均匀分布

当让还有更多的特性需要去学习，这儿仅抛砖引玉