在使用 CSS 的 Flexbox，也就是柔性盒子布局，可以先设置一下柔性盒子容器。比如这个白色的大盒子里面装了三个小盒子。要使用 flexbox 布局这三个小盒子，可以先在这个白色大盒子上面，添加 tailwind 提供的 flex 这个类。

这个类就是把元素的 display 属性设置成了 flex。你会发现，现在它里面的这三个小盒子的布局会发生一些变化。

默认的 flex 方向是 row，在这个 flex 容器上面可以再添加一个 flex-row ，这个类就是把 flex-direction 设置成了 row。

使用 flexbox 要知道两个轴，一个是 main axis，也就是主轴，还有一个是 cross axis，交叉轴。这个主轴与交叉轴会根据这个 flex-direction 的值变化。如果把 flex-direction 设置成 row，那主轴就是水平方向的，交叉轴是垂直方向。如果 flex-direction 是 column，主轴就变成了垂直方向的，交叉轴就是水平方向的。

要把 flex 方向设置成 column，可以添加一个 flex-col， 这个类就是把 flex-direction 设置成了 column。