本文介绍了CSS中的Flex布局，通过设置`display: flex`将父元素转变为弹性容器。主要内容包括主轴对齐方式如`justify-content`的`flex-start`、`flex-end`、`center`及均匀分布的几种情况，以及如何改变主轴方向，如使用`flex-direction: column`实现垂直布局，`row-reverse`和`column-reverse`进行反向排列。
给父元素设置display:flex 父元素变成弹性容器,父元素里面的元素变成弹性盒子
flex布局主轴对齐方式
justify-content: flex-start 默认值, 起点开始依次排列- justify-content flex-end 终点开始依次排列
- justify-content
center沿主轴居中排列 - justify-content
space-around弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 - justify-content
space-between弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 - justify-content
space-evenly弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等
flex-start
flex-end
center 水平居中
最低0.47元/天 解锁文章
扫一扫
3535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
