2015年的某一天，我在某外企当码农，用户对浏览器的使用不像我们大天朝，因此心情上轻松了不少。有一次，我和文博同志接到了一个新网站的任务，我无意中（还是经文博的提起后？）在CSS-Tricks上看到了一篇关于Flexbox的入门介绍，发现这和之前接触的float+margin+padding的布局大不一样，我想，那我们就用flex布局吧！这是第一次接触并使用到Flex布局，可以说用得很浅。

在后来一次的工作中，我遇到了这样一个很普通的场景，同一行的DIV，有两块：左和右，我自然地通过 float:right 来将DIV右到了右边。

1
2
3
4
5
6
7
8
9
10
11
12
.container {
  width: 400px;
  height: 300px;
}
.item {
  width: 100px;
  height: 50px;
  padding: 7px 15px;
}
.right {
  float: right;
}
1
2
3
4
5
6
7
8
<div class="container">
 <div class="item">
   left part
 </div>
 <div class="item right">
   right part
 </div>
</div>

然而事情发生了转折，left-div 和 right-div 的高度是不一样的（字体大小不一样），但是在同一行上都需要居中对齐，我于是想到了flex布局。
通过 flex:space-between 将元素分别漂流到了两遍，并设置 align-items:center 来实现垂直居中, 示例如下：

1
2
3
4
5
6
7
8
9
10
.container {
  width: 400px;
  height: 300px;
  display: -webkit-box;
  display: space-between;
  -webkit-box-pack: justify;
  jusity-content: space-between;
  -webkit-box-align: center;
  align-items: center;
}

但是我忘记将里面的 .right 样式移除，而且在chrome之下，其表现是很正常的，我也以为事情完成了。

可是在后面真实的手机测试中，尤其是比较低版本系统的安卓手机(Android 4.1.1, webkit默认浏览器），我们发现right-part这一块的DIV，直接消失了！ 经过debuggap的调试，我发现float:right; 一旦拿掉，DIV就回来了。

注：邧一峰老师的flex介绍写得也很适合我们，附上链接 flex布局教程