普通视图

发现新文章,点击刷新页面。
昨天以前首页

Flexbox 布局实际用例

作者 anran758
2020年2月22日 16:28

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

格式化上下文

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

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

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

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

圣杯布局

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

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

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

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

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

栅格布局

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

justify-content 尾列不整齐

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

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

动画

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

结束

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

参考资料:

Pixiv 背景图例:

  1. ちょけ | アリスミクと白うさぎ
  2. Azit | Miku
  3. ぽむ | もっと高くまで!
  4. 雨陌 | 8.31
  5. akino | つもりつもるキモチ。
❌
❌