AB Data

维方式：列和行。容器可以用来创建相应内容的框架。由于块元素通常位于另一个元素的下方，因此内容被分为几行。然后，这些元素会在这些行中并排显示。最常见的是，有 12 列可以分配给该行中的任何元素。如果该行已满，则必须开始新的一行。这种方法也会导致大量嵌套元素，但它确实可以帮助您更好地控制页面元素。随着屏幕变得越来越小，如何使元素更具适应性就出现了挑战。如果可用宽度减少，元素会在彼此之间滑动。

创新：CSS 网格
除了 Flexbox 之外，很快又添加了新的 CSS Grid。这使得 爱沙尼亚 whatsapp 数据​ 在容器内创建自定义网格并灵活地将元素分配给这些区域成为可能。位于桌面上页面内容区域旁边的边缘列可能会突然处于完全不同的位置。这使得不仅网站的元素响应屏幕宽度，整个布局也可以响应不同的设备。将内容与设计分离的目标又近了一大步。

给胡萝卜浇水，消灭杂草
长话短说：通过网格花园，玩家会看到代表虚拟床不同区域的网格布局。在总共 28 个关卡中的第一个关卡中，您所要做的就是选择胡萝卜所在的田地并为其浇水。在后面的关卡中，杂草增加了挑战：你必须使用 CSS Grid 用有毒物质消灭杂草，并给胡萝卜浇水。这里也有一个编辑器，其中包含网格并保持一个可以编辑的开放区域。通过这种方式，CSS Grid 最重要的概念以一种有趣的方式呈现出来。


网格花园应用程序的胡萝卜地

#3 弹性盒防御
守住塔楼！ Flexbox Defense 让您可以更轻松地开始在网站上进行新的定位方式。该游戏的目的是在标记的区域内放置防御塔，以防御敌人的攻击。这款同样基于关卡的游戏提供 12 波攻击，玩家只能通过新学到的技能来防御。


Flexbox防御界面

什么是弹性盒？
继著名的 CSS 盒模型的经典定位之后，Flexbox 是一种在页面上定位元素的新方法。 Flexbox 代表“灵活布局盒模型”。使用 Flexbox 定位的元素会动态响应显示网页的屏幕宽度。

重点是更容易定位，但这应该谨慎对待。不建议用它来设计整个页面布局。 Flexbox 的优势更多地体现在各个元素及其定位上。与上面介绍的 CSS 网格相结合，可以使用两种灵活的响应式技术，使网站定位和布局设计变得轻而易举。

结论
正如您所看到的，当您享受乐趣时学习新事物并不难。还有什么比网络游戏更有趣的呢？当学习和理解看似复杂且最初看似困难的问题时尤其如此。包装成在线游戏后，它就变成了小孩子的游戏。所以：拿起键盘，准备好，开始吧！

如果您想了解有关 adesso 世界中令人兴奋的主题的更多信息，请查看我们之前发布的博客文章。

顺便说一句，您可以在CSS Diner、Grid Garden和Flexbox Defense网站上亲自尝试整个过程。