弹性布局Flexbox

整   理：晋 哲

时   间：2017-01-06

说   明：使用弹性布局，设置自适应布局、水平垂直居中等样式

弹性布局很早就出来了，但之前一直没有使用Flexbox主要还是考虑兼容性，且兼容性写法太冗余。目前，旧版的属性都已被重新修改，所有浏览器的兼容性也得到很大支持，移动端可以放心使用了，当然浏览器前缀还是要加上的。

能够被运用到的布局结构，如响应式布局、选项卡分布、水平垂直居中等，优先考虑使用flex，代替之前一些特殊布局所使用的传统解决方案：使用display属性或position属性或float属性。

flex常用属性

display：将元素设置为内联或者块flexbox容器元素
flex：复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
justify-content：控制flex容器内item的水平对齐方式
align-items：控制flex容器内item的垂直对齐方式
flex-direction：定义弹性盒子元素的排列方向

其属性值：

display：flex | inline-flex
flex：none | < flex-grow > | < flex-shrink > | < flex-basis >
justify-content：flex-start | flex-end | center | space-between | space-around
align-items：    flex-start | flex-end | center | baseline | stretch
flex-direction：row | row-reverse | column | column-reverse

常见用法：
一、自适应布局

<!-- HTML -->
<div class="box">
    <div class="subnav"></div>
    <div class="content"></div>
</div>

<!-- CSS -->
.box{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.subnav{
    width: 100px;
    height: 100px;
    background: #000;
}
.content{
    background: #f60;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

解释：subnav固定宽度，content自适应撑满剩余空间

二、使用 Flexbox 的水平垂直居中布局

<!-- HTML -->
<div class="box">
    <div class="content"></div>
</div>

<!-- CSS -->
.box{
    height: 200px;
    background: #eee;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.content{
    width: 100px;
    height: 100px;
    background: #f60;
}