CSS Flexbox 学习指南、工具与框架
MarshaQuarl
8年前
<p style="text-align:center"><img src="https://simg.open-open.com/show/463fe7f82f1818ac2fa297edc82b488d.jpg"></p> <p>Flexbox 是一种更有效的布局方式，它能更好的分配容器空间，并控制项目的对齐。虽然，掌握它的理论有些复杂，但幸运的是，我们可以借助开放的网络来学习并逐步掌握它。</p> <p>在本文中，我们整合了一些最佳的 Flexbox 学习资源，它们可以帮助你了解Flexbox 的方方面面。涉及什么是 Flexbox，以及如何有效地使用它。</p> <h2>Flexbox 学习指南</h2> <p>CSS 之 Flexbox 参考（作者：Sara Soueidan）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7ed48d5f5cae6b21dabf3594c69c1696.png"></p> <p>CSS 之 Flexbox 参考 是学习 Flexbox 基础知识的系列文章。在文章中，你可以学习 Flexbox 的各种属性，并通过文中那些优秀的交互演示来更好的理解它们。</p> <p>深入了解 Flexbox — 设计、工具和工作流程（作者：Greg Smith）</p> <p>在 <a href="/misc/goto?guid=4959663786277385478" rel="nofollow,noindex">《深入了解 Flexbox》</a> 文章中，我们将详细地了解 Flexbox 的简史，以及其语法的技术细节等内容。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/e3c6e8337c93555d6da620b9c16ee841.png"></p> <p>译者注：中文翻译 —— 【 <a href="/misc/goto?guid=4959737467584625096" rel="nofollow,noindex">传送门</a> 】</p> <p>使用 CSS 弹性盒子（作者：MDN）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/af2503c7bf51b8d601f561493d7e1d4d.png"></p> <p>本文源自 Mozilla 开发者网络。 在文章中 ，作者将向你介绍 Flexbox 的布局模式，文中还提供了浏览器兼容性图表供你查阅。</p> <p>一个完整的 Flexbox 指南（作者：Chris Coyier）</p> <p>或许， 这个完整的 Flexbox 指南 能让你了解关于 Flexbox 的一切。文章中包含了大量的实例，能助你更快地掌握它。</p> <p>译者注：中文翻译 —— 【 <a href="/misc/goto?guid=4959737467681681813" rel="nofollow,noindex">传送门</a> 】</p> <p>如何开始使用 CSS Flexbox（作者：Paul Underwood）</p> <p>这个教程 将指导你利用 CSS Flexbox 从设置简单的布局开始，逐步带你掌握更复杂的布局实例。</p> <p>CSS3 Flexbox 属性可视化指南（作者：Dimitar）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/df19ef1cb4f0b1127ba14e3e9603e015.png"></p> <p>这本可视化指南 ，不仅能够帮助你了解 CSS3 Flexbox 的基本概念，而且能够向你展示 Flexbox 的各个属性是如何影响页面布局的。</p> <p>译者注：中文翻译 —— 【 <a href="/misc/goto?guid=4959737467763849283" rel="nofollow,noindex">传送门</a> 】</p> <p>什么是 Flexbox ？！（作者：Wes Bos）</p> <p>这个教程将利用 20 个免费视频来助你解锁 Flexbox 布局的技能！有时候，通过视频教程的学习往往比复杂的探讨效果要好很多。</p> <p>5 分钟学 Flexbox（互动之旅）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/87361e5891962b03f6d82d78608863ba.png"></p> <p>如果你厌倦阅读长篇教程，那么 5 分钟学Flexbox 会更适合你。这是一个简单的交互教程，你将在短短的 5 分钟内，通过 53 张幻灯片来了解什么是 Flexbox 以及它如何应用。</p> <h2>Flexbox 实例和资源</h2> <p>Flexbox 模式（作者：CJ Cenizal）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/148507fbc0f7a2a65a6925c3f3c04bad.png"></p> <p>Flexbox 模式 将通过一些代码实例带你开启 Flexbox 的学习之旅。</p> <p>Flexbox 解决方案（作者：Philip Walton）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/6e9a01993ba69c460b912052887336c0.png"></p> <p>Flexbox 解决方案 将为你展示运用 Flexbox 来解决特定问题的示例。</p> <p>Atom 上 Flexbox 代码自动补全插件</p> <p>这个插件 让你在 Atom 编辑器中编写 Flexbox 代码，变得轻而易举。</p> <p>Sublime Text 上 Flexbox 代码自动补全插件</p> <p>与上述插件的功能相似，你可以在 Sublime Text 编辑器中使用。</p> <h2>基于 Web 的 Flexbox 工具</h2> <p>Flexplorer（作者：Bennett Feely）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a9e067ba1c906ba87cd9f34831a0ed2f.png"></p> <p>Flexplorer 是一款可以通过简单的可视化界面，创建复杂布局的工具。</p> <p>CSS Flexbox Please!（作者：Eiji Kitamura）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8a92e8f8a6be0cc5f0e9c34835bd8b92.png"></p> <p>CSS Flexbox Please! 是一款能够自动生成 Flex 布局的在线工具。同时，它也提供了相应的 CSS 与 HTML 代码。</p> <p>Test CSS Flexbox Rules Live（作者：Tayler Summs）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/437692a1db95ef5915d74476015abf23.png"></p> <p>实时测试 CSS Flexbox 规则 这款在线工具，将为你演示 Flex 的每个属性是如何影响布局的。</p> <p>Flexbox Tester （作者：Eiji Kitamura）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/3c8598d6e6e90daace31c99d4d79ef42.png"></p> <p>Flexbox Tester 能够帮助你了解如何计算 Flex item 的宽度。</p> <p>Flexibility（作者：10up）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d06105215d013aed901b6a5237e97129.png"></p> <p>Flexibility 上的直观的菜单能帮助你了解，各种 Flex 属性是如何更改 Flexbox 布局的。</p> <p>Fibonacci Flexbox 页面布局编写器（作者：Max Steenbergen）</p> <p>Fibonacci Flexbox 页面布局编写器 是一款面向非开发人员的布局工具，你可以使用它来创建 Flex 布局。</p> <p>Flexy Boxes（作者：Pete Boere）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2d54602fc04dd05736f6ab5b8400fd17.png"></p> <p>Flexy Boxes 将帮助你生成 Flex 布局，并可以同时调整 Flex 容器和项目的属性。</p> <p>Flexbox Playground（作者：Gabi Siquès）</p> <p>Flexbox Playground 将通过多样化的展示让你感受 Flex 属性的强大功能。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/835cf7202265c098d687151c90ba4fde.png"></p> <p>译者注：这个作品获得了 <a href="/misc/goto?guid=4959737467836417594" rel="nofollow,noindex">2016 年 CodePen 上十佳作品之 NO.1.</a></p> <p>Flexbox Editor（作者：Brian Diehr）</p> <p>你可以在 Flex Box Editor 上通过拖拽框盒子的方式，并调整其属性来测试你的 Flex 布局。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d0726d8dce766f39e681317b94344c45.png"></p> <p>译者注：这个工具已经失效了。:（</p> <h2>基于 Flexbox 的 Web 框架</h2> <p>Flexbox 网格 - 基于 Flexbox 的网格系统</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/cd3a6558114eb707a21db600f2b0f281.png"></p> <p>Flexbox Grid 是一个易用的框架，它拥有的大量实例用于创建各种类型的布局。</p> <p>cssPlus - 基于 Flexbox 的布局脚手架</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/68925b654fa1d5c8fd7da000ad8e7fce.png"></p> <p>cssPlus 帮助你创建基于 Flexbox 的灵活、响应式的布局。</p> <p>STRUCTURE - 基于 Flexbox 的声明式网格框架</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/b287004a3d0951c3edead66014b2a1b8.png"></p> <p>STRUCTURE 是一个声明式框架 - 这意味着它对元素使用了非标准属性。这样可以减少开发时间，而不是向每个项目中添加几个 CSS 类。</p> <p>Juiced – Flexbox CSS 框架</p> <p>Juiced 的创作灵感源自 Foundation 与 Bootstrap，它是一款灵活的 CSS 前端框架，对现存基于网格的 CSS 框架有了诸多的改进。同时，它建立在弹性盒布局规范上。</p> <h2>彩蛋</h2> <p>Flexbox Froggy（作者：Thomas Park）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/821712deeaa77b730798d2def10817d2.png"></p> <p>通过做一些有趣的游戏，来感受学习的快乐。 Flexbox Froggy 就是一款需要你编写 Flexbox 代码才能通关的游戏哦。</p> <h2>最后</h2> <p>当你合理使用 Flexbox 布局时，它甚至可以将复杂的布局任务化繁为简。那么，从今天开始使用这些资源，提高你的开发效率吧！</p> <p>是不是，还有些不过瘾。那么，译者再补充一些不错的资源，让你学到吐....</p> <p>No! No! No! 应该是学到 High.</p> <h2>速查表</h2> <p>The Ultimate Flexbox Cheat Sheet</p> <p>号称 终极版 Flexbox 属性速查表 ，还有 这个速查表 也不错，你可以其下载 PDF 版本进行查阅。</p> <p>译者注： <a href="/misc/goto?guid=4959737467937031851" rel="nofollow,noindex">终极版 Flexbox 属性速查表中文版</a></p> <h2>教程</h2> <ul> <li><strong><a href="/misc/goto?guid=4958988471066268478" rel="nofollow,noindex">Flexbox 入门到精通</a> </strong><br> 你会发现，译文的大部分中文翻译版都是来自这里。同时，感谢大漠老师。</li> <li><strong><a href="/misc/goto?guid=4958970342053652120" rel="nofollow,noindex">Flex 布局教程：语法篇</a> </strong></li> <li><strong><a href="/misc/goto?guid=4958970342156226234" rel="nofollow,noindex">Flex 布局教程：实例篇</a> </strong><br> 这两篇文章来自于阮一峰老师，作者将带大家通俗易懂的了解 Flex 布局的语法，以及常见 Flex 布局的写法。</li> </ul> <p>感谢你的阅读，如果觉得文章不错，不妨点个赞。</p> <p> </p> <p> </p> <p>来自：http://www.jianshu.com/p/bfd11e45efa9</p> <p> </p>