用flex布局的问题

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

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

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

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

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

解决：① 不改变代码结构

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

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

          ② 改变代码结构（不推荐）

             包裹两个元素就好