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