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而诞生的

 

官方地址：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：两端第一个元素不要多余空间，其他子元素平分多余空间

 

 

转载于:https://www.cnblogs.com/ben-li/p/8876616.html