如果咱们在写移动端页面(包括PC端页面)遇到以上几种情况的时候,弹性布局是最好的选择.
三:弹性布局的具体使用很多小伙伴都清楚弹性布局很好用,但是就是属性太多记不住而且还容易将属性对应的效果搞混,所以接下来我将给大家总结一下弹性布局中几个必须掌握的属性.
①:弹性布局第一步就是先给父元素设定为弹性盒子,既设置属性:display:flex.如代码所示:
②:设置伸缩盒子的主轴方向,默认伸缩盒子中的主轴是水平显示,所以默认元素都是一行显示的.可以通过flex-direction属性调整主轴的方向,改变元素的显示方式
flex-direction: row的显示效果如下图所示:
flex-direction:row-reverse的显示效果如下图所示:
flex-direction:column的显示效果如下图所示:
