0
点赞
收藏
分享

微信扫一扫

移动端开发常用布局2-弹性布局详细讲解

诗尚凝寒 2022-04-24 阅读 40

在这里插入图片描述

③:以携程为例,当页面中出现子元素按照其他比例分割父元素的时候,依然可以通过弹性盒子中的flex实现快速实现.如图:红色区域是按照 2:1:2 和 2:1:1:1的比例显示.

如果咱们在写移动端页面(包括PC端页面)遇到以上几种情况的时候,弹性布局是最好的选择.

三:弹性布局的具体使用

很多小伙伴都清楚弹性布局很好用,但是就是属性太多记不住而且还容易将属性对应的效果搞混,所以接下来我将给大家总结一下弹性布局中几个必须掌握的属性.

①:弹性布局第一步就是先给父元素设定为弹性盒子,既设置属性:display:flex.如代码所示:

在这里插入图片描述

②:设置伸缩盒子的主轴方向,默认伸缩盒子中的主轴是水平显示,所以默认元素都是一行显示的.可以通过flex-direction属性调整主轴的方向,改变元素的显示方式

flex-direction: row的显示效果如下图所示:

在这里插入图片描述

flex-direction:row-reverse的显示效果如下图所示:

在这里插入图片描述

flex-direction:column的显示效果如下图所示:

在这里插入图片描述

flex-direction:column-reverse的显示效果如下图所示:

在这里插入图片描述

③:设置元素在主轴方向的对齐显示方式,通过justify-content属性实现

justify-content:flex-start的显示效果如下:

在这里插入图片描述

justify-content:flex-end的显示效果如下:

在这里插入图片描述

justify-content:space-between的显示效果如下:

在这里插入图片描述

justify-content:space-around的显示效果如下:

在这里 **《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源	威信搜索公众号【编程进阶路】** 插入图片描述

④:设置弹性盒子中元素在侧轴(交叉轴)方向的对齐方式通过align-items实现.

align-items: stretch 默认值的显示效果如下:

在这里插入图片描述

align-items:flex-start显示效果如下:

在这里插入图片描述

align-items:flex-end显示效果如下:

在这里插入图片描述

align-items:center显示效果如下:

在这里插入图片描述

⑤:在伸缩盒子中,默认所有的子元素超出父容器宽度后都不换行显示,如果希望让超出父元素后换行显示,可以通过flex-wrap属性实现

flex-wrap:nowrap 默认效果如下:

在这里插入图片描述

flex-wrap:wrap 显示效果如下:

在这里插入图片描述

⑥:在伸缩和中元素换行后设置多行对齐方式,通过align-content属性实现

align-content:stretch默认值显示效果:

在这里插入图片描述

align-content:flex-start 显示效果如下:

举报

相关推荐

0 条评论