网页布局的传统方法是使用dispaly、position、float三个属性，实现起来相当麻烦。2009年，W3C提出flexbox布局方案，大大简化了布局的难度。如今，各大浏览器都支持flexbox布局方案，我们可以放心使用。

虽然flexbox降低了网页布局的难度，但是其也有上十种属性，想要完全掌握也不是轻而易举的。

相比于读枯燥的说明文档，通过游戏学习flexbox布局将更有趣、更易理解。本文将介绍两款学习flexbox布局的小游戏。

Flexbox defense

Flexbox defense是一款塔防游戏，通过flexbox相关属性调整炮塔的位置，消灭行进中的怪物。游戏总共有10关，完成所有的关卡可以学习justify-content、align-items、flex-direction、order、align-self这5个属性。游戏比较简单，初学者10分钟左右就能通关。

Flexbox froggy

Flexbox froggy要求你通过设置flex属性，将青蛙移到相应颜色的荷叶上。游戏总共有24关，难度较前一个游戏高，不仅包括前面已经学习的5个属性，还增加了flex-wrap、flex-flow、align-content3个属性。但是，玩通前一个游戏后再玩这个游戏，也不算难。

第21关的align-content属性容易与align-items相混淆，不易理解。align-items所调整的是元素整体的位置，而align-content调整的是元素整体中所包含的多行子元素间的布局关系。因此，如果元素整体只有1行，align-content属性是无效的。

更多资料

除了以上提到的8个flexbox属性外，还有flex-grow、flex-shrink、flex-basis、flex4个属性，详情请参考阮一峰先生的博文：
Flex 布局教程：语法篇
Flex 布局教程：实例篇