在本文中,我们整合了一些最佳的 Flexbox 学习资源,它们可以帮助你了解Flexbox 的方方面面。涉及什么是 Flexbox,以及如何有效地使用它。
Flexbox 学习指南
CSS 之 Flexbox 参考(作者:Sara Soueidan)
![](https://pic3.zhimg.com/v2-7ed48d5f5cae6b21dabf3594c69c1696_b.png)
深入了解 Flexbox — 设计、工具和工作流程(作者:Greg Smith)
在《深入了解 Flexbox》文章中,我们将详细地了解 Flexbox 的简史,以及其语法的技术细节等内容。
![](https://pic2.zhimg.com/v2-e3c6e8337c93555d6da620b9c16ee841_b.png)
使用 CSS 弹性盒子(作者:MDN)
![](https://pic2.zhimg.com/v2-af2503c7bf51b8d601f561493d7e1d4d_b.png)
一个完整的 Flexbox 指南(作者:Chris Coyier)
或许,这个完整的 Flexbox 指南能让你了解关于 Flexbox 的一切。文章中包含了大量的实例,能助你更快地掌握它。
译者注:中文翻译 —— 【传送门】
如何开始使用 CSS Flexbox(作者:Paul Underwood)
这个教程将指导你利用 CSS Flexbox 从设置简单的布局开始,逐步带你掌握更复杂的布局实例。
CSS3 Flexbox 属性可视化指南(作者:Dimitar)
![](https://pic2.zhimg.com/v2-df19ef1cb4f0b1127ba14e3e9603e015_b.png)
译者注:中文翻译 —— 【传送门】
什么是 Flexbox ?!(作者:Wes Bos)
这个教程将利用 20 个免费视频来助你解锁 Flexbox 布局的技能!有时候,通过视频教程的学习往往比复杂的探讨效果要好很多。
5 分钟学 Flexbox(互动之旅)
![](https://pic3.zhimg.com/v2-87361e5891962b03f6d82d78608863ba_b.png)
Flexbox 实例和资源
Flexbox 模式(作者:CJ Cenizal)
![](https://pic2.zhimg.com/v2-148507fbc0f7a2a65a6925c3f3c04bad_b.png)
Flexbox 解决方案(作者:Philip Walton)
![](https://pic1.zhimg.com/v2-6e9a01993ba69c460b912052887336c0_b.png)
Flexbox 解决方案将为你展示运用 Flexbox 来解决特定问题的示例。
Atom 上 Flexbox 代码自动补全插件
这个插件让你在 Atom 编辑器中编写 Flexbox 代码,变得轻而易举。
Sublime Text 上 Flexbox 代码自动补全插件
与上述插件的功能相似,你可以在 Sublime Text 编辑器中使用。
基于 Web 的 Flexbox 工具
Flexplorer(作者:Bennett Feely)
![](https://pic4.zhimg.com/v2-a9e067ba1c906ba87cd9f34831a0ed2f_b.png)
Flexplorer 是一款可以通过简单的可视化界面,创建复杂布局的工具。
CSS Flexbox Please!(作者:Eiji Kitamura)
![](https://pic3.zhimg.com/v2-8a92e8f8a6be0cc5f0e9c34835bd8b92_b.png)
CSS Flexbox Please! 是一款能够自动生成 Flex 布局的在线工具。同时,它也提供了相应的 CSS 与 HTML 代码。
Test CSS Flexbox Rules Live(作者:Tayler Summs)
![](https://pic4.zhimg.com/v2-437692a1db95ef5915d74476015abf23_b.png)
实时测试 CSS Flexbox 规则这款在线工具,将为你演示 Flex 的每个属性是如何影响布局的。
Flexbox Tester (作者:Eiji Kitamura)
![](https://pic3.zhimg.com/v2-3c8598d6e6e90daace31c99d4d79ef42_b.png)
Flexibility(作者:10up)
![](https://pic2.zhimg.com/v2-d06105215d013aed901b6a5237e97129_b.png)
Flexibility 上的直观的菜单能帮助你了解,各种 Flex 属性是如何更改 Flexbox 布局的。
Fibonacci Flexbox 页面布局编写器(作者:Max Steenbergen)
Fibonacci Flexbox 页面布局编写器是一款面向非开发人员的布局工具,你可以使用它来创建 Flex 布局。
Flexy Boxes(作者:Pete Boere)
![](https://pic4.zhimg.com/v2-2d54602fc04dd05736f6ab5b8400fd17_b.png)
Flexbox Playground(作者:Gabi Siquès)
Flexbox Playground 将通过多样化的展示让你感受 Flex 属性的强大功能。
![](https://pic3.zhimg.com/v2-835cf7202265c098d687151c90ba4fde_b.png)
Flexbox Editor(作者:Brian Diehr)
你可以在 Flex Box Editor 上通过拖拽框盒子的方式,并调整其属性来测试你的 Flex 布局。
![](https://pic2.zhimg.com/v2-d0726d8dce766f39e681317b94344c45_b.png)
基于 Flexbox 的 Web 框架
Flexbox 网格 - 基于 Flexbox 的网格系统
![](https://pic2.zhimg.com/v2-cd3a6558114eb707a21db600f2b0f281_b.png)
Flexbox Grid 是一个易用的框架,它拥有的大量实例用于创建各种类型的布局。
cssPlus - 基于 Flexbox 的布局脚手架
![](https://pic3.zhimg.com/v2-68925b654fa1d5c8fd7da000ad8e7fce_b.png)
STRUCTURE - 基于 Flexbox 的声明式网格框架
![](https://pic1.zhimg.com/v2-b287004a3d0951c3edead66014b2a1b8_b.png)
STRUCTURE 是一个声明式框架 - 这意味着它对元素使用了非标准属性。这样可以减少开发时间,而不是向每个项目中添加几个 CSS 类。
Juiced – Flexbox CSS 框架
Juiced 的创作灵感源自 Foundation 与 Bootstrap,它是一款灵活的 CSS 前端框架,对现存基于网格的 CSS 框架有了诸多的改进。同时,它建立在弹性盒布局规范上。
彩蛋
Flexbox Froggy(作者:Thomas Park)
![](https://pic3.zhimg.com/v2-821712deeaa77b730798d2def10817d2_b.png)
通过做一些有趣的游戏,来感受学习的快乐。Flexbox Froggy 就是一款需要你编写 Flexbox 代码才能通关的游戏哦。
最后
当你合理使用 Flexbox 布局时,它甚至可以将复杂的布局任务化繁为简。那么,从今天开始使用这些资源,提高你的开发效率吧!
是不是,还有些不过瘾。那么,译者再补充一些不错的资源,让你学到吐....
No! No! No! 应该是学到 High.