山东有客赞

科技创造生活·精诚赢得未来

依托网络科技数据中心,以行业内领先的大数据技术及产品体系为基础, 运用成熟的运营模式为企业和个人提供定制化的大数据产品和服务。

News

新闻资讯

vue里非常好用的flex布局插件 flex.css的用法
来源: | 作者:山东有客赞 | 发布时间: 2022-05-11 | 58 次浏览 | 分享到:
今天发先一个超级好用的vue flex插件 flex.css 今天分享给大家

npm安装

npm install flex.css --save

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值相加之和