Flexbox 布局实际用例

上篇文章介绍了 flexbox 的属性与示例，本文再通过几个 flex 布局的案例来体会 flex 布局的特性带来的便利和问题~

格式化上下文

当我们给父容器设置 flex 属性后，flex 容器会在容器内创建一个新的 flex 格式化上下文(formatting context)。在这上下文中 float、 clear 将失去作用，vertical-align 对于 flex 元素也不再会起作用。

在实际开发中，当我们使用行内元素(inline、inline-block) 时，有时候可能会看到元素之间会有一个奇怪的间隙，并且设置的字体越大间隙就越大。原来这个间隙是我们在编写源代码时标签换行导致，不换行就不会出现这种情况。

多数情况下，我们在编写代码时会习惯用编辑器对代码进行格式化，格式化后会使这些标签换行从而导致间隙。这在要求像素级还原的项目中就有点尴尬了。

以前常见的做法是在父元素设置 font-size: 0 消除间隙，再设置子元素的字体大小。这样做确实有点麻烦，因此在 flex 上下文中，这些间隙默认就会被清除。

通常我们使用 flex 布局更多的是用于整体的布局设计，如:

大屏布局:

小屏布局:

[codepen] 本例 Demo: flex 圣杯布局

在互联网早期，由于用户网路的限制，经常会出现 html 的内容显示出来但页面样式还没加载出来的情况，这会导致用户没能最先看到想看的东西。因此 Matthew Levine 在 2006 年提出了圣杯布局的概念，在 HTML 源代码中将用户想看的内容挪到次要内容的前面。

上例 demo 就是使用 flex 布局实现的圣杯布局，虽然在 HTML 源码里 Main 处于其他两块内容之上，但通过 order 属性可以调整元素间的顺序。

除此之外，还可以通过媒体查询(@media)做响应式页面，当屏幕宽度小于 640px 后仅需修改几项 flex 属性就可以改变布局排列的方式，十分灵活。

如果你使用过 react/vue 主流 UI 库的话，你就会发现他们使用布局容器也是 flex 布局实现的，比如 Element UI、Ant Design 等。

栅格布局也可以通过 flex 来实现：在以下的 demo 中，HTML 源码内的各元素都是平级，通过调整 flex 属性实现了跨行或跨列的效果。

栅格布局也可以通过 flex 来实现：在以下的 demo 中，HTML 源码内的各元素都是平级，通过调整 flex 属性实现了跨行或跨列的效果。

让CSS flex布局最后一行列表左对齐的N种方法 --By 张鑫旭

多数情况下使用 justify-content 是要求子元素们散开，但尾列元素不够的时候，散开就显得很奇怪了，为此我们可以做如下处理:

在 MDN Animatable CSS properties 上列出了可以使用 Animations 或 Transitions 进行动画处理的属性，其中就有 flex 属性。因此还可以结合动画进行布局设计:

由于平台不支持插入 codepen，同时不允许上传超过 10M 的图片(虽然有录 GIF)，因此动画效果只能去 demo 上进行尝试~

通过以上几个案例是不是对 flex 布局的灵活有了更深的感受呢？以上 demo 大多借鉴已有的思路，如果你有什么好的想法，也可以自己动手尝试一番或分享出来~

参考资料:

Pixiv 背景图例：

原文出自: Flexbox 布局实际用例 | anran758's blog

目前鸽子群聚集了前端、java、Python 等不同语言的博主，大家大多都有写博客的习惯。欢迎对 web 领域感兴趣，或者有在写博客的同学加入谈论~