Flex弹性布局是W3C提出的一种简洁,高效,响应式的解决方案,相对于传统的布局大大的提高了前端的工作效率。
这种布局方案起初面世时,由于兼容性问题并没有得到广泛的应用,直到近些年,各大主流浏览器已经对Flex布局有了全面的支持,尤其是在移动端,已经可以放心的使用。
![37f1c0fc0ff3e58703bda132a5d9937e.png](https://i-blog.csdnimg.cn/blog_migrate/1e64cfc45dc5305eab9e787e8fe31cac.png)
在公众号排版中,我们可以利用Flex局部轻松搞定一些网格布局,而实现这些只需要几行代码。
举个栗子
炙手可热的iPhoneSE面世时,苹果就在官方公众号上推送了一条基于Flex布局的交互图文,简洁的网格布局加上合理的动画交互让人眼前一亮。
点击网格查看效果
结构解析
可以看到该效果就是运用了Flex布局,并在每个网格里加入了SVG交互动画。
![baf424ffca108c4025a0d36ecf55d1bd.png](https://i-blog.csdnimg.cn/blog_migrate/01e970e03a72a3078c2dc3bba3c05062.png)
只需要几行代码就可以实现这种网格结构,还可以对网格中的子元素继续使用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布局来实现。
![1e6c07ecbde4c7ae866e03e004c26bde.png](https://i-blog.csdnimg.cn/blog_migrate/f1a5e93a77519753bbcc3c01c65fafa8.png)
"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网格布局在不远处等着我们,用不了多久我们就会在公众号排版中见到它,让我们拭目以待吧!
![fc9a3be1691c3deeee9a3dfbdd772c85.png](https://i-blog.csdnimg.cn/blog_migrate/e44507e7b10bdb57b7c6865bef65d93a.png)
![f1de38cfe1f3f40e4d9553029fc50a35.gif](https://i-blog.csdnimg.cn/blog_migrate/60c86af6aea67ac036781f10628660dc.gif)