flex.css声明式布局
flex.css能完美的运⾏在移动端的各种浏览器，甚⾄能运⾏在ie10+的各种PC端浏览器中
flex和data-flex
flex.css 有两个版本，⼀个是flex.css⼀个是data-flex.css，这两个版本其实是⼀样的，
唯⼀的区别是，⼀个是使⽤flex属性设置，⼀个是使⽤data-flex属性设置。react 不⽀持flex属性直接布局，所以data-flex.css实际上是为了react⽽诞⽣的
官⽅地址：github/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" >
<div >看看我是不是居中的</div>
</div>
<!-- data-flex属性匹配，简单的⼦元素居中例⼦： -->
<div data-flex="main:center cross:center" >
<div >看看我是不是居中的</div>
</div>
flex属性⼤全
dir：主轴⽅向
top：从上到下
right：从右到左
bottom：从下到上
left：从左到右（默认）
main：主轴对齐⽅式
flex布局对齐方式right：从右到左
left：从左到右（默认）
justify：两端对齐
center：居中对齐
cross：交叉轴对齐⽅式
top：从上到下（默认）
bottom：从上到下
baseline：基线对齐
center：居中对齐
stretch：⾼度并排铺满
box：⼦元素设置
mean：⼦元素平分空间
first：第⼀个⼦元素不要多余空间，其他⼦元素平分多余空间
last：最后⼀个⼦元素不要多余空间，其他⼦元素平分多余空间
justify：两端第⼀个元素不要多余空间，其他⼦元素平分多余空间

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。