移动Web-Flex布局

主轴方向

目标:使用flex-direction改变元素排列方向(修改主轴的方向

l 思考:Flex布局模型中,弹性盒子默认沿着哪个方向排列?
l 答:水平方向。
l 思考:如何实现内容垂直排列?

主轴默认是水平方向, 侧轴默认是垂直方向
l 修改主轴方向属性: flex-direction

1.先确定主轴的方向,在选择对应的属性实现主轴或侧轴对齐

目标:使用flex-wrap实现弹性盒子多行排列效果

l 思考:默认情况下,多个弹性盒子如何显示?
l 弹性盒子换行显示 : flex-wrap: wrap;
l 调整行对齐方式 :align-content
Ø 取值与justify-content基本相同

版权声明:
作者:zhuim521
链接:https://zhuimwl.com/67.html
来源:追梦博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
移动Web-Flex布局
主轴方向 目标:使用flex-direction改变元素排列方向(修改主轴的方向) l 思考:Flex布局模型中,弹性盒子默认沿着哪个方向排列? l 答:水平方向。 l 思考:……
<<上一篇
下一篇>>