0
点赞
收藏
分享

微信扫一扫

弹性布局一些基本属性

Villagers 2022-05-05 阅读 38
csscss3html

弹性布局

给元素添加display:flex;元素将会成为弹性布局

在默认的情况下,弹性盒子根据主轴(X轴)方向进行排列

①设置排序方向:flex-direction:row(默认)||row-reverse(从右往左)||column(竖向Y轴)||column-reverse(从下往上)

![主轴排序方式](https://img-blog.csdnimg.cn/e24c6c9e04dc4e3fb612af1264bb97cb.png#pic_center)

②设置是否换行,在弹性盒子中默认是不换行的,flex-wrap:nowrap(默认不换行)||wrap(换行)||wrap-reverse(换行,从下往上换)

![默认不换行](https://img-blog.csdnimg.cn/fec15b65bc1c421f9b8e3802ac1aa113.png#pic_center) ![换行](https://img-blog.csdnimg.cn/7d0502feb7b446c48e80a32025b5a35b.png#pic_center) ![换行,第一行在下面](https://img-blog.csdnimg.cn/d84cae72923745c2b4228df2d62be39b.png#pic_center)

③设置主轴对齐方式:justify-content:flex-start(左对齐)||flex-end(右对齐)||center(居中)||space-between(两端对齐,平均分配中间空隙)||space-around(两端分一半,平均分配中间空隙)

![主轴对齐方式](https://img-blog.csdnimg.cn/c5396cf5f75c4b17ae7eb060580c05b8.png#pic_center)

④设置交叉轴(y轴对齐方式):align-items:center(居中)||flex-start(顶部对齐)||flex-end(底部对齐)

![交叉轴对齐方式](https://img-blog.csdnimg.cn/c699b4011319419cbdb21b2ad62fd528.png#pic_center)
举报

相关推荐

0 条评论