本文详细介绍了如何在父级元素上使用display: flex，以及justify-content和align-items属性的不同对齐选项，包括flex-start、flex-end、center、space-around、space-between和space-evenly。此外，还讲解了align-self控制单个弹性盒子的侧轴对齐。
flex的用法：
父级元素添加display：flex；
同样是在父级添加justify-content：主轴（x轴）的对齐方式
flex-start 默认值，起点开始依次排列
flex-end 重点开始依次排列
center 沿主轴居中排列
space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
space-evenly 弹性盒子沿主轴均匀排列 ，弹性盒子与容器之间间距相等
align-items：侧轴（y轴）的对齐方式
flex-start 默认值，起点开始依次排列，
flex-end：终点开始依次排列
center：沿侧轴居中对齐
stretch：默认值，弹性盒子沿着主轴线拉伸至铺满容器
alidgn-self：添加到弹性容器，控制某个弹性盒子在侧轴的对齐方式
flex-start：默认值，起点开始依次排列
center：沿侧轴居中排列
stretch：默认值，弹性盒子沿主轴被拉伸至铺满容器
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
