南宁小程序开发,挑战百日学习计划第27天(flex弹性布局6大属性)

弹性布局的6大属性,我这几天才搞明白,所以今晚顺便更新, 学习计划铁定是不能停止的,热爱学习不能自拔。哈哈
最近我的网站已经可以被收录了。感觉挺不错!,就等百度给流量,开始把公司做大做强

南宁小程序开发 www.zkelm.com

flex 6大属性
1.flex-directive:盒子的排序方向 row |row-reverse |column|column-reverse

如图
在这里插入图片描述
2.justify-content:定义了项目在主轴上的对齐方式
justify-content:flex-start | flex-end | center | space-between | space-around |space-evenly

重点 space-evenly 这个的具体布局样式如图
在这里插入图片描述
space-between:表现的形势如图
在这里插入图片描述

3.align-items:属性定义flex子项在flex容器的当前行(纵轴)方向上的对齐方式
align-items:flex-start | flex-end | center | stretch | baseline

在这里插入图片描述

flex-wrap:项目的换行模式:flex-wrap: wrap | nowrap | wrap-reverse

默认为不换行:nowrap
在这里插入图片描述
好咧,总算把flex搞明白了一大半,剩下的 是项目属性 6个。下期在更新

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值