Flexbox 布局实际用例

最新推荐文章于 2025-10-30 04:27:01 发布

原创最新推荐文章于 2025-10-30 04:27:01 发布 · 901 阅读

CC 4.0 BY-SA版权

本文通过实例探讨了CSSFlexbox布局的特性，包括格式化上下文、消除行间间隙、圣杯布局、栅格布局、justify-content的调整以及与动画的结合。展示了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 领域感兴趣，或者有在写博客的同学加入谈论~

作者：anran758

原文地址：https://segmentfault.com/a/1190000021843546