玩转flex布局

H5页面如果使用了flex，就会发现处处离不开它，因为实在太多优点了！

flex实现水平垂直居中

有两种方式：

请注意这里flex-direction不同时，justify-content和align-items所代表的轴方向。

flex order使用

flex中的order属性对致力于无障碍优化的QQ空间同学来说，也很有用，例如以下这个页面：

为了实现第一名居中，我们可能如上实现，但是这样不利于数据的顺序加载和无障碍阅读，改成下面的方式会友好很多：

flex grow shrink

在最初使用flex时，我会直接敲flex:1，而没有了解其实flex是flex-grow/flex-shrink/flex-basis的简写，当不希望因为父级元素过小时子元素被扩展或压缩时，flex-grow/flex-shrink就变得重要了。如下图的对比：

图1: 蓝色和绿色元素宽度被等比例压缩

图2: 蓝色元素宽度不被压缩

flex 替代fixed布局方案

如下图当底部或者底部有fixed定位元素时，我们一般会这样实现，然而在iOS11上滚动时，fixed元素可能有短暂的消失时间

而另一种解决方案是通过flex来解决，如下图：

ps: 第二种方案也有缺点，当主体内容过长时不能使用系统的原生滚动，局部滚动会让安卓系统滚动体验不太流畅（iOS系统支持用-webkit-overflow-scrolling: touch;开启弹性滚动）。

用display:inline-flex解决display:inline-block空格问题

很多时候我们需要在同一行显示多个元素，如果在代码中这些换行了，html解析时会把这些换行转换为一个空格，于是乎显示可能是这样：

此时我们可能会用font-size:0来去掉空格，为了兼容iOS9系统以及其他低端机（系统最小fontSize为12px）还需要设置letter-spacing:-4px; 在.item内部如果有内容还需要设置回font-size和letter-spacing保证内容的正常显示。于是乎就多了四行代码。如果直接在父级采用inline-flex布局，就不存在空格这回事了：

ps：为什么不采用flex？因为很多时候需要父级的宽度受子元素的宽度影响而不是更上一层的父级影响，而内联flex可以做到。如下图的横向滚动：

flex 兼容

以下是之前用flex时遇到的一些坑：

1. 写flex:1时请带上min-width或者min-height(取决于flex-direction)，这样可以避免小程序和低端机上的一些bug。

2. 不要在button元素内使用align-items,手机上可能不生效。

3. 最后最重要的当然是要记得autoprefix啦。