[CSS]Flex布局真的太好用了

对于新技术的使用，我总是比别人慢好几拍。记得10年jQuery正渐渐流行起来，我当时不屑一顾，没想到后来转行成前端，一用就是很多年。

Flex布局早就听说过，但是一直没有实际用过。主要原因就是当年浏览器的兼容性不太好，而工作要兼顾较低版本的浏览器。

实际上，在移动端，Flex布局的兼容性已经很好了，完全可以在实际开发中放心的使用。我在最近的工作中，全盘使用了Flex布局。每当回想起以前汗流浃背地解决各种居中，为了实现要求的布局使用大量的多余的元素、css……时，再对比使用flex布局后的气定神闲，我就会感到使用flex布局是那么的幸福。

为什么Flex布局如此迷人呢？因为它解决了各种居中、对齐等问题。

上面这种布局，左侧文字要垂直居中。方法是有很多种，但是哪一种也比不上Flex布局方便：

.box {
  display: flex;
  align-items: center;
}

.box1 {
  flex: none;
  width: 100rpx;
  text-align: center;
}

.box2 {
  flex: auto;
}

可以看到，Flex布局解决了垂直居中的大问题，只要简单的设置align-items: center，不管左侧、右侧的内容如何变化，两者始终是居中的。

从上面的代码中还可以看到，box1宽度固定，box2宽度占据了剩余空间。有了这么简单的实现方式，再也不用BFC了。

使用Flex布局，大部分时间可以不用再考虑margin、padding对布局的影响，不用担心inline-block元素之间的空隙问题。

Flex布局可以用在方方面面，大到列表，小到对齐图标，它始终是非常好用。

用了Flex布局，float、position、vertical-align和与之配合的line-height等老朋友见面的次数就很少了。