Flexbox 布局实际用例

时间 2020-02-27

标签 flexbox 布局实际栏目 Flex 繁體版

原文原文链接

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

格式化上下文

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

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

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

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

一般咱们使用 flex 布局更多的是用于总体的布局设计，如:git

大屏布局:
github

小屏布局:
web

在互联网早期，因为用户网路的限制，常常会出现 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 领域感兴趣，或者有在写博客的同窗加入谈论~