阅读 206

[译] 趣味学习 CSS 布局 —— 第一部分:弹性布局

趣味学习 CSS 布局 —— 第一部分:弹性布局

这个内容已经是 2 年前的了。请记住,以下内容可能已过时。

在我开始学习 CSS 时,一切都是关于用浮动、绝对定位与相对定位实现你想要做的事。今天,我们有了很棒的新工具来创建布局:弹性布局网格布局。如果你忽略 IE9 以及更早的版本,则 Flexbox 几乎在任何地方都受到很好的支持,可用于创建灵活且可扩展的布局。目前,网格布局并非在任何地方都受到支持,但是如果您正在寻找一种构建复杂而通用的响应式网格的方法,那还是很有希望的。

掌握这两个模块可能有些棘手。幸运的是,一些很棒的人制作了许多有趣的工具来帮助你学习并掌握这些它们,所以当它们被各处支持时你也准备好了。

这是帮助您学习 CSS 布局的可能性系列的第一篇文章,今天我们将专注于学习弹性布局
如果你要查找本文的法文版本,可以查看 “Apprendre le positionnement en s’amusant – Partie 1 : Flexbox

学习弹性布局的小游戏

Flexbox Froggy 小游戏

Flexbox Froggy 是一款有趣的小游戏。您需要使用不同的弹性布局属性将可爱的小青蛙带到睡莲。(Thomas H. Park 制作)

Flexbox Froggy 小游戏

Flexbox defense 小游戏

Flexbox defense 是一款小游戏,您将在其中使用弹性布局阻止传入的敌人越过防线。(Channing Allen 制作)

Flexbox defense 小游戏

弹性布局可视化实验面板

有时最好的学习方法是自己做实验。这里有一些可视的弹性布局实验面板,您可以在这里探索和解构东西,以更好地理解语法。

CSS3 弹性布局的视觉指南

添加、移除和定位子元素,并测试您在布局中所有要用到的弹性布局属性。(Dimitar Stojanov 制作)

Yoksel 的弹性布局备忘单

弹性布局实验面板

在这个由 Gabi 制作的 codepen 实验面板上,你将能够测试不同的弹性布局属性,并使用它们的值来观察结果。

弹性布局实验面板

Flexplorer

在另一个由 Bennett Feely 制作的小型可视化实验面板中,您可以进行测试并使用不同的属性来探索弹性布局 CSS 模块的可能性。

Flexplorer

弹性布局可以帮助您实现什么

弹性布局的解决方案

在弹性布局之前,垂直居中曾是一个噩梦,这个站点将向您展示一些现在使用弹性布局可以轻松解决的技巧。(Phil Walton 制作)

弹性布局的解决方案

弹性布局模式

弹性布局用来构建布局很好,但是像标签或卡片这样更复杂的模式呢?弹性布局模式可以满足您的需求。(CJ Cenizal 制作)

弹性布局的解决方案

弹性布局备忘单

弹性布局的语法并不总是那么容易,这里有一些备忘单可以帮助您记住不同的属性和值。

弹性布局的 CSS 技巧指南

弹性布局的 CSS 技巧指南

Joni Bologna 的丰富的弹性布局备忘单

Joni Bologna 的丰富的弹性布局备忘单

Yoksel 的弹性布局备忘单

Yoksel 的弹性布局备忘单

需要更多的帮助?

Wes Boss 制作了 20 个免费视频帮助您学习弹性布局,并且您也可以查看这篇文章用一些 gif 动画解释弹性布局
这是针对弹性布局的,稍后请参见第二部分网格布局。

您是否正在为网站或移动应用程序寻找 UX 或 UI 设计师?如果您想邀请我参加您的会议,或只是想了解更多关于我的信息?您可以查看我的作品与我联系

如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。


掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 AndroidiOS前端后端区块链产品设计人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划官方微博知乎专栏

关注下面的标签,发现更多相似文章
评论