1 弹性布局 Display Flex
让我们从一个非常简单的例子开始。
并排显示引用quote 示例 1a
假设你要在网页上（在桌面屏幕尺寸下）将三条励志引用显示在同一行。你希望这些板块高度相同，并且根据每条引用的长度来调整宽度。这些引用是随机选取的，你不知道每条引用的长短，所以无法为它们指定固定单位的宽度。
点击下方在线尝试链接，可以使用已掌握的任何实用类来尝试实现这种布局：
你尝试了吗？我希望你已经相信，在不知道每条引用长度的情况下，没有办法实现这种布局。如果我告诉你仅用一个实用类就能做到，你会相信吗？让我们来看看怎么做。
解决方案
html
<div class="flex">
<div>...</div>
<div>...</div>
<div>...</div>
</div>你只需要给父容器添加flex类。这是完整的可运行示例。大功告成！
调整输出面板的大小，重新排列引用内容，或者添加更长的内容。注意这些块的灵活性。目前它还不具备响应式，而且还不能添加太多引用内容，但我们很快就会解决这些问题。
既然你已经体验了一下 Flexbox，那我们来真正了解一下它的作用。
理解display: flex 概念
Flexbox 是一种帮助我们在一个方向（水平或垂直）上排列元素，并控制它们的尺寸、对齐方式、显示顺序等的方法。为此，我们至少需要两个元素：一个被称为弹性容器的父元素，以及至少一个被称为弹性项目的子元素。
在上面的例子中，父元素是弹性容器，而.quote元素是弹性项目。正如你刚才看到的，给任何元素添加flex类，就能使其成为弹性容器。
注意：只有容器的直接子元素会成为弹性项目。弹性项目的子元素不会受到影响。
| Tailwind 类 | CSS 属性及值 | 解释 |
|---|---|---|
flex | display: flex; | 将元素的display属性设置为flex，会使其成为弹性容器 |
一旦你有了弹性容器和一些弹性项目，就可以给这些元素添加多种其他的 Tailwind 实用类，来控制尺寸、对齐方式、间距等。接下来我们将逐一查看这些类，每个类都从一个示例开始讲解。