flex 兼容性_拒绝低效！Flex布局让公众号图文排版变轻松

Flex弹性布局是W3C提出的一种简洁，高效，响应式的解决方案，相对于传统的布局大大的提高了前端的工作效率。

这种布局方案起初面世时，由于兼容性问题并没有得到广泛的应用，直到近些年，各大主流浏览器已经对Flex布局有了全面的支持，尤其是在移动端，已经可以放心的使用。

caniuse网站上Flex布局的支持情况

在公众号排版中，我们可以利用Flex局部轻松搞定一些网格布局，而实现这些只需要几行代码。

举个栗子

炙手可热的iPhoneSE面世时，苹果就在官方公众号上推送了一条基于Flex布局的交互图文，简洁的网格布局加上合理的动画交互让人眼前一亮。

点击网格查看效果

结构解析

可以看到该效果就是运用了Flex布局，并在每个网格里加入了SVG交互动画。

Flex布局结构

只需要几行代码就可以实现这种网格结构，还可以对网格中的子元素继续使用Flex布局，来实现更复杂的嵌套布局效果。

"display:flex;flex-direction:column;">

"display:flex;width:50%;flex-direction:column;">

"display:flex;">

"display:flex;">

"display:flex;width:50%;flex-direction:column;">

"display:flex;">

"display:flex;">




动画分析

每个网格中都加入了简单的SVG点击动画，点击网格后会显示一张GIF动图，当动画播放结束又回到了开始画面，我们可以用SVG的animate标签来实现点击动画的展示和隐藏。

代码只是在两张图片间做透明度切换，点击网格后用透明度动画显示和隐藏GIF动图。由两张图片我们可以根据需要延伸出不同动画排列组合，可以是 SVG + JPG+ JPG，SVG + GIF + GIF， SVG + JPG + GIF，SVG + GIF + JPG。

点击查看动画效果

"height:0px!important;">"width:100%;background-image:url(aniamte.gif)">"opacity" restart="whenNotActive" 
    begin="click" dur="2s" keyTimes="0;0.01;0.70;1" 
    values="0;1;1;0;" fill="remove"> 




"width:100%;padding-top:75%;background-image:url(cover.png);">

现在开始使用Flex

使用Flex技术可以用更少的代码实现常用的布局效果，比如说经典的九宫格，侧边栏导航等等，在公众号排版中遇到的复杂布局场景我们都可以考虑用Flex布局来实现。

Flex实现九宫格

"display:flex;flex-wrap:wrap;justify-content:space-evenly;">

"01.jpg">

"02.jpg">

"03.jpg">

"04.jpg">

"05.jpg">

"06.jpg">

"07.jpg">

"08.jpg">

"09.jpg">




总结

随着现代浏览器对新技术的迭代支持越来越快，越来越完善，我们可以比以往更快的享受到这些新技术给我们带来的便捷高效。Flex布局技术虽然强大，但还有更强大的CSS Grid网格布局在不远处等着我们，用不了多久我们就会在公众号排版中见到它，让我们拭目以待吧！

你“在看”我嘛？