Tailwind 是一种快速构建 Web 应用程序的工具包，可以使你更容易地编写 HTML 和 CSS 代码。在这篇文章中，我们将讨论如何在 Tailwind 中分别设置水平和垂直位置。
水平对齐
在 Tailwind 中，控制元素水平对齐的类主要是 justify-* 和 items-*。justify-* 用于控制 flex 容器中子元素的水平对齐，而 items-* 用于控制 flex 容器中子元素的垂直对齐。
常用的 justify-* 类如下：
justify-start：子元素靠左对齐justify-end：子元素靠右对齐justify-center：子元素居中对齐justify-between：子元素沿主轴均匀分布justify-around：子元素沿主轴均匀分布，且在子元素间留有相同的间距justify-evenly：子元素沿主轴均匀分布，且在子元素间留有相同的空间
示例代码：
---- ----------- ---------------- ---- ----------------- ---- ------------ ---- ------------------- ---- ------------ ---- ------------------ ---- ------------ ------
上面的代码将创建一个具有 3 个 div 元素的 flex 容器，它们沿着主轴居中。每个子元素都有宽度为 20 像素和高度为 20 像素。背景颜色分别为红色、绿色和蓝色。
垂直对齐
与水平对齐类似，控制元素垂直对齐的类主要是 justify-* 和 items-*。但是，它们被用于不同的元素。
常用的 items-* 类如下：
items-start：子元素顶部对齐items-end：子元素底部对齐items-center：子元素居中对齐items-baseline：子元素基线对齐items-stretch：子元素拉伸以占满容器的高度
示例代码：
---- ----------- -------------- ---- ----------------- ---- ------------ ---- ------------------- ---- ------------ ---- ------------------ ---- ------------ ------
上面的代码将创建一个具有 3 个 div 元素的 flex 容器，它们沿着主轴居中，并且垂直对齐于它们各自的中心。背景颜色分别为红色、绿色和蓝色。子元素的高度分别为 20、10 和 30 像素。
总结
通过使用 Tailwind，我们可以很容易地控制元素的水平和垂直对齐。简单但有用的 justify-* 和 items-* 类可以帮助我们轻松掌握这一技术，并快速实现自己的设计。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64b0c5bd48841e9894ce12ca