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：兩端第一個元素不要多餘空間，其餘子元素平分多餘空間