南宁小程序开发,挑战百日学习计划第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个。下期在更新

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章