CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局，它具有很强大的功能，可以很轻松实现很多复杂布局。然而Flex属性较多，不便于记忆，而在项目中，布局使用频繁，那么可以将flex抽离为一个布局工具类，简化使用方式，快速应用于项目，减少记忆成本。
Flex介绍
Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
基本概念
采用Flex布局的元素为，称为 Flex容器，容器的直接子元素称为 Flex项目，容器默认有两个轴心线，用于项目的对齐与排列，水平主轴为 main axis，垂直主轴为 cross axis，主轴的开始位置为 start， 结束位置为 end。
主轴和交叉轴的判定：如果flex-direction为row，则主轴是水平方向，如果是column，则主轴是垂直方向
CSS属性说明
将任意元素的 display 属性设置为 flex，可将其转换为Flex容器
设为Flex容器后，子元素的 float、clear 和 vertical-align 属性将失效
Flex容器属性
主轴方向：水平排列（默认） | 水平反向排列 | 垂直排列 | 垂直反向排列
flex-direction: row | row-reverse | column | column-reverse;
换行：不换行（默认） | 换行 | 反向换行(第一行在最后面)
flex-wrap: nowrap | wrap | wrap-reverse;
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
flex-flow: <flex-direction> || <flex-wrap>;
主轴对齐方式：起点对齐（默认） | 终点对齐 | 居中对齐 | 两端对齐 | 分散对齐
justify-content: flex-start | flex-end | center | space-between | space-around;
交叉轴对齐方式：拉伸对齐（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 第一行文字的基线对齐
align-items: stretch | flex-start | flex-end | center | baseline;
多根轴线对齐方式：拉伸对齐（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 两端对齐 | 分散对齐
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
Flex项目属性
顺序：数值越小越靠前，默认为0
order: <number>;
放大比例：默认为0，如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推
flex-grow: <number>;
缩小比例：默认为1，如果空间不足则会缩小，值为0不缩小
flex-shrink: <number>;
项目自身大小：默认auto，为原来的大小，可设置固定值 50px/50%
flex-basis: <length> | auto;
flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
项目自身对齐：继承父元素（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 基线对齐 | 拉伸对齐
align-self: auto | flex-start | flex-end | center | baseline | stretch;
flex.css的使用
使用data属性来设置css样式，便于兼容现有的项目，避免样式重名。
Flex容器配置项
标签属性使用方式: data-flex="xxx xxx xxx"
配置项
排列形式: row | column
间距: gutter
内容水平垂直居中: center
可换行: wrap
主轴对齐方式: main-start | main-center | main-end | main-between | main-around
交叉轴对齐方式: cross-start | cross-center | cross-end | cross-baseline | cross-stretch
多轴对齐方式: start | end | center | between | around | stretch
响应式: full
Flex项目的配置项
标签属性使用方式: data-cell="xxx xxx xxx"
配置项
元素自身对齐方式: start | end | center | baseline | stretch
固定宽度: 1/2 | 1/3 | 1/4 | 1/5 | 1/6
排序: order[1-10]
使用
基础栅格系统
每项宽度相同，自然平分，高度默认都相同
<div data-flex="gutter">
<div data-cell><div class="item">auto</div></div>
<div data-cell><div class="item">auto</div></div>
<div data-cell><div class="item">auto</div></div>
<div data-cell><div class="item">auto</div></div>
<div data-cell><div class="item">auto</div></div>
</div>
相对的固定宽度与自适应宽度
<div data-flex="gutter row">
<div data-cell="1/2"><div class="item">1/2</div></div>
<div data-cell><div class="item">auto</div></div>
<div data-cell><div class="item">auto</div></div>
</div>
响应式
响应式栅格系统通过添加媒体查询到栅格元素或栅格容器来实现。 当满足媒体查询的条件时，栅格系统就能自动调整。
<div data-flex="full gutter">
<div data-cell><div class="item">full/auto</div></div>
<div data-cell><div class="item">full/auto</div></div>
<div data-cell><div class="item">full/auto</div></div>
</div>
项目对齐
置顶对齐
项目默认是置顶对齐的，手动添加可以使用 cross-start
<div data-flex="gutter">
<div data-cell> <div class="item">置顶对齐</div></div>
<div data-cell> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
<div data-cell> <div class="item">置顶对齐</div></div>
</div>
置底对齐
<div data-flex="gutter cross-end">
<div data-cell> <div class="item">置底对齐</div></div>
<div data-cell> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
<div data-cell> <div class="item">置底对齐</div></div>
</div>
垂直居中对齐
<div data-flex="gutter cross-center">
<div data-cell> <div class="item">居中对齐</div></div>
<div data-cell> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
<div data-cell> <div class="item">居中对齐</div></div>
</div>
混合对齐 为个别项目自身设置独立的对齐方式
<div data-flex="gutter">
<div data-cell="start"> <div class="item">居顶对齐</div></div>
<div data-cell="start"> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
<div data-cell="center"> <div class="item">居中对齐</div></div>
<div data-cell="end"> <div class="item">居底对齐</div></div>
</div>
主轴起点对齐
<div data-flex="gutter main-start">
<div data-cell="1/5"> <div class="item">居左对齐</div></div>
</div>
<div data-flex="gutter main-center">
<div data-cell="1/5"> <div class="item">居中对齐</div></div>
</div>
<div data-flex="gutter main-end">
<div data-cell="1/5"> <div class="item">居右对齐</div></div>
</div>
主轴两端对齐
<h5>两端对齐</h5>
<div data-flex="gutter main-between">
<div data-cell="1/5"> <div class="item">两端对齐</div></div>
<div data-cell="1/5"> <div class="item">两端对齐</div></div>
<div data-cell="1/5"> <div class="item">两端对齐</div></div>
</div>
主轴分散对齐
<h5>分散对齐</h5>
<div data-flex="gutter main-around">
<div data-cell="1/5"> <div class="item">分散对齐</div></div>
<div data-cell="1/5"> <div class="item">分散对齐</div></div>
<div data-cell="1/5"> <div class="item">分散对齐</div></div>
</div>
无限嵌套
栅格可以无限嵌套在另一个栅格中
<div data-flex="gutter">
<div data-cell>
<div class="item">
<div data-flex="gutter">
<div data-cell><div class="item">1</div></div>
<div data-cell>
<div class="item">
<div data-flex="gutter">
<div data-cell><div class="item">2</div></div>
<div data-cell><div class="item">2</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-cell="1/4"><div class="item">1/4</div></div>
</div>
自定义顺序
<div data-flex="gutter">
<div data-cell="order5"><div class="item">1</div></div>
<div data-cell="order3"><div class="item">2</div></div>
<div data-cell="order2"><div class="item">3</div></div>
<div data-cell="order1"><div class="item">4</div></div>
<div data-cell="order4"><div class="item">5</div></div>
</div>
兼容性
flex在演化过程有三个版本，旧版本 display:box | inline-box, 混合版本 display:flexbox | inline-flexbox, 新版本 display: flex | inline-flex
.box{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
旧版相对于新版的主要区别：flex项目必须是block，没有换行设置，没有反向设置，主轴没有space-around，顺序值从1开始
关于新旧版的详情对比可参考下面两篇
这里我们使用 postcss 插件 autoprefixer 来自动处理新旧版的兼容，配置如下:
autoprefixer({
browsers: [
'ie >= 8',
'ie_mob >= 10',
'ff >= 26',
'chrome >= 30',
'safari >= 6',
'opera >= 23',
'ios >= 5',
'android >= 2.3',
'bb >= 10'
]
})
** 这里只做了语法上的兼容，但是旧版所没有的特性仍然要警慎使用，参考上面的区别，相信以后随着浏览器的升级，差别会越来越小 **
示例
flex.css 的具体源码，请参考示例
参考阅读
