flex和data-flex
flex.css 有两个版本，一个是flex.css一个是data-flex.css，这两个版本实际上是同样的，
惟一的区别是，一个是使用flex属性设置，一个是使用data-flex属性设置。react 不支持flex属性直接布局，因此data-flex.css其实是为了react而诞生的
官方地址：https://github.com/lzxb/flex.css
npm安装：
npm install --save flex.css
使用说明：
<!--
将dist目录下的css文件引入到你的页面中，根据你的须要引入 flex.css 使用flex属性匹配 data-flex.css 使用data-flex属性匹配（React使用） 若是使用了webpack打包，npm安装后，而且配置了ES6编译器的话， flex 属性匹配能够直接使用： import 'flex.css'; data-flex 属性匹配能够直接使用(react使用) import 'flex.css/dist/data-flex.css'; --> <!-- flex属性匹配，简单的子元素居中例子： --> <div flex="main:center cross:center" style="width:500px; height: 500px; background: #108423"> <div style="background: #fff">看看我是否是居中的</div> </div> <!-- data-flex属性匹配，简单的子元素居中例子： --> <div data-flex="main:center cross:center" style="width:500px; height: 500px; background: #f1d722"> <div style="background: #fff">看看我是否是居中的</div> </div>
flex属性大全
dir：主轴方向
top：从上到下 right：从右到左 bottom：从下到上 left：从左到右（默认）
main：主轴对齐方式
right：从右到左 left：从左到右（默认） justify：两端对齐 center：居中对齐
cross：交叉轴对齐方式
top：从上到下（默认） bottom：从上到下 baseline：基线对齐 center：居中对齐 stretch：高度并排铺满
box：子元素设置
mean：子元素平分空间
first：第一个子元素不要多余空间，其余子元素平分多余空间
last：最后一个子元素不要多余空间，其余子元素平分多余空间 justify：两端第一个元素不要多余空间，其余子元素平分多余空间