解锁弹性盒模型！
读到本书的这部分内容，意味着你已经学习了使用 Tailwind CSS 的弹性盒模型实用工具所能实现的所有功能。太棒啦！
你可能无法记住所有内容，这完全正常。因为你是通过实际案例来学习的，所以在能够熟练运用弹性盒模型之前，你只需要再复习几遍就可以了。而且你随时都可以回过头来参考这些案例。
下面让我们来看一些综合性的案例，每个组件中都包含多个弹性盒容器。
弹性盒综合示例
文章预览 示例 15a
这是来自 Frontend Mentor 网站的挑战。
这是一个在弹性盒中使用弹性盒的示例。整个卡片是一个弹性容器，其中图像占据 40%的宽度，文本块占据 60%。然后，文本块中的页脚是另一个弹性容器，作者图像、姓名、日期和分享图标是弹性项目。
遵循移动优先的方法，通过将外部弹性容器的方向设置为列，使这个组件具有响应性，对于较大屏幕，则将其更改为行。
**提示：**使用 flex、flex-col、align-items、ml-auto 实用类以及 flex-* 的任意值来实现 40% 和 60% 的宽度。
健康报告 示例 15b
这是一个简单的健康报告组件，用于测试你新掌握的弹性盒技能。
你同样需要在弹性盒中使用弹性盒，但这次是在行方向内使用列方向。如果你能在不使用媒体查询的情况下使其具有响应性，那就更厉害了。
提示：对外部弹性盒使用 flex、flex-wrap、flex-* 实用类。使用 flex-col、justify-* 和 min-w-* 实用类来允许块进行换行。
推文 示例 15c
从单个 “推文” 设计中可以学到很多东西。这是 Twitter 网络应用程序时间轴中推文的精确模拟（字体除外）。
在这里，你需要创建三个弹性盒容器！一个用于整个推文。一个用于姓名、用户名、日期和选项。第三个用于包含 “回复”、“转发” 等操作的行。
**提示：**使用 flex、justify-*、items-* 实用类和自动外边距。
哇！这几乎涵盖了你能用 CSS 弹性盒做的所有事情。花些时间消化这些内容，用你观察到的其他组件和布局多做练习。然后再回来学习 CSS 网格布局。
**注意：**网格布局比弹性盒稍微复杂一些！做好准备。
