flex.css:移动端 flex 布局神器

本文介绍了一个用于简化Flexbox布局的库Flex.css。该库提供了一种简单的方法来实现响应式和复杂的布局,支持两种属性匹配方式:使用flex属性匹配和data-flex属性匹配(适用于React)。文章还详细解释了flex属性的各个选项及其用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

http://www.tuicool.com/articles/ayUJVzr


下载


git clone https://github.com/lzxb/flex.css.git

npm

npm install flex.css --save

<!--
  将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:两端第一个元素不要多余空间,其他子元素平分多余空间

flex-box属性说明

取值范围(0-10),单独设置子元素多余空间的如何分配,设置为0,则子元素不占用多余的多余空间
多余空间分配 = 当前flex-box值/子元素的flex-box值相加之和
http://www.tuicool.com/articles/ayUJVzr

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值