概念
结论
了解 Flexbox 的浏览器支持情况并获取学习资源
你已经学会了如何使用 Flex 容器和 Flex 项目对齐属性。我带你逐步理解了绝对与相对的 Flex 项目、自动边距对齐,以及切换 Flex 方向时可能出现的奇怪效果。
你还有机会将所学的 Flex 技能应用到 Catty Music 的布局构建中,之后我还简要介绍了响应式设计。
这确实是一段漫长的旅程。现在,我将为你讲解一些最后的概念,并推荐一些我认为非常有用的资源和链接。
Flexbox 的浏览器支持情况如何?
当考虑在生产环境中使用 Flexbox 模型时,这是一个常见的问题。我无法给出完美的答案,但 caniuse 网站对此有非常详尽的说明。
以下是来自 caniuse 的截图,浏览器支持情况相当出色。你可以亲自查看 这里。

在我职业生涯早期,我多次浏览 caniuse 网站,却始终难以理解其中数据的具体含义。
因此,这里做一个简要说明。
在 caniuse 网站的右下角有一个图例。你可以参考上面的图片,或者直接访问该网站,找到图例部分,就能轻松理解。
其实就这么简单。
资源
-
本课程的代码仓库:
在“build a music app layout”文件夹中,包含了 Catty Music 练习题的完整解决方案。
我正在撰写一本关于现代 CSS 布局的重要书籍。
本书聚焦于 Flexbox 和 Grid 布局模型。点击这里看看! 我相信你会喜欢的 :-)