- 原文地址：Fun places to learn CSS Layout – Part 1: Flexbox
- 原文作者：Stéphanie
- 译文出自：掘金翻译计划
- 本文永久链接：github.com/xitu/gold-m…
- 译者：MarchYuanx
- 校对者：sleepingxixi, Stevens1995
趣味学习 CSS 布局 —— 第一部分：弹性布局
这个内容已经是 2 年前的了。请记住，以下内容可能已过时。
在我开始学习 CSS 时，一切都是关于用浮动、绝对定位与相对定位实现你想要做的事。今天，我们有了很棒的新工具来创建布局：弹性布局和网格布局。如果你忽略 IE9 以及更早的版本，则 Flexbox 几乎在任何地方都受到很好的支持，可用于创建灵活且可扩展的布局。目前，网格布局并非在任何地方都受到支持，但是如果您正在寻找一种构建复杂而通用的响应式网格的方法，那还是很有希望的。
掌握这两个模块可能有些棘手。幸运的是，一些很棒的人制作了许多有趣的工具来帮助你学习并掌握这些它们，所以当它们被各处支持时你也准备好了。
这是帮助您学习 CSS 布局的可能性系列的第一篇文章，今天我们将专注于学习弹性布局。
如果你要查找本文的法文版本，可以查看 “Apprendre le positionnement en s’amusant – Partie 1 : Flexbox“
学习弹性布局的小游戏
Flexbox Froggy 小游戏
Flexbox Froggy 是一款有趣的小游戏。您需要使用不同的弹性布局属性将可爱的小青蛙带到睡莲。(Thomas H. Park 制作)
Flexbox defense 小游戏
Flexbox defense 是一款小游戏，您将在其中使用弹性布局阻止传入的敌人越过防线。(Channing Allen 制作)
弹性布局可视化实验面板
有时最好的学习方法是自己做实验。这里有一些可视的弹性布局实验面板，您可以在这里探索和解构东西，以更好地理解语法。
CSS3 弹性布局的视觉指南
添加、移除和定位子元素，并测试您在布局中所有要用到的弹性布局属性。(Dimitar Stojanov 制作)
弹性布局实验面板
在这个由 Gabi 制作的 codepen 实验面板上，你将能够测试不同的弹性布局属性，并使用它们的值来观察结果。
Flexplorer
在另一个由 Bennett Feely 制作的小型可视化实验面板中，您可以进行测试并使用不同的属性来探索弹性布局 CSS 模块的可能性。
弹性布局可以帮助您实现什么
弹性布局的解决方案
在弹性布局之前，垂直居中曾是一个噩梦，这个站点将向您展示一些现在使用弹性布局可以轻松解决的技巧。(Phil Walton 制作)
弹性布局模式
弹性布局用来构建布局很好，但是像标签或卡片这样更复杂的模式呢？弹性布局模式可以满足您的需求。(CJ Cenizal 制作)
弹性布局备忘单
弹性布局的语法并不总是那么容易，这里有一些备忘单可以帮助您记住不同的属性和值。
弹性布局的 CSS 技巧指南
Joni Bologna 的丰富的弹性布局备忘单
Yoksel 的弹性布局备忘单
需要更多的帮助？
Wes Boss 制作了 20 个免费视频帮助您学习弹性布局，并且您也可以查看这篇文章用一些 gif 动画解释弹性布局。
这是针对弹性布局的，稍后请参见第二部分网格布局。
您是否正在为网站或移动应用程序寻找 UX 或 UI 设计师？如果您想邀请我参加您的会议，或只是想了解更多关于我的信息？您可以查看我的作品、与我联系。
如果发现译文存在错误或其他需要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。
掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。
