0
点赞
收藏
分享

微信扫一扫

用flex布局的问题


1、如果红色、、蓝色、绿色三个元素的宽度不一致,如何保证中间的蓝色元素一直居中。如下图所示:

用flex布局的问题_代码结构

解决:中间的元素使用绝对定位 

2、 上图中的红色元素如果没有了,如何保证蓝色的元素居中。如下图所示:

用flex布局的问题_绝对定位_02

 解决:给左边一个空元素占位,可设置opacity:0

3、如何实现中间的元素靠左或靠右

用flex布局的问题_前端_03

解决:① 不改变代码结构

              靠左的话,给中间的元素加margin-right:auto 

              靠右的话,给中间的元素加margin-left:auto

          ② 改变代码结构(不推荐)

             包裹两个元素就好

举报

相关推荐

0 条评论