Tailwind 中 justify-self 和 align-self 类名的使用方法

Tailwind 是一个流行的 CSS 框架，它提供了一组类名，可以轻松地创建出各种布局效果。其中，justify-self 和 align-self 类名可以用来控制一个元素在其父容器中的水平和垂直位置。这两个类名的使用方法如下：

justify-self

justify-self 类名用来控制一个元素在其父容器中的水平位置。它有以下几个取值：

• justify-self-auto: 元素在水平方向上处于自动对齐状态。
• justify-self-start: 元素在水平方向上靠左对齐。
• justify-self-end: 元素在水平方向上靠右对齐。
• justify-self-center: 元素在水平方向上居中对齐。
• justify-self-stretch: 元素在水平方向上拉伸至父容器的宽度。

以下是一个示例代码：

<div class="flex justify-center">
  <div class="w-20 h-20 bg-red-500 justify-self-start"></div>
  <div class="w-20 h-20 bg-blue-500"></div>
  <div class="w-20 h-20 bg-green-500 justify-self-end"></div>
</div>

上面的代码创建了一个 flex 布局，其中三个子元素使用了不同的 justify-self 类名。第一个子元素使用了 justify-self-start，它靠左对齐；第二个子元素没有使用 justify-self 类名，它处于默认的自动对齐状态；第三个子元素使用了 justify-self-end，它靠右对齐。最终的效果如下图所示：

align-self

align-self 类名用来控制一个元素在其父容器中的垂直位置。它有以下几个取值：

• align-self-auto: 元素在垂直方向上处于自动对齐状态。
• align-self-start: 元素在垂直方向上靠上对齐。
• align-self-end: 元素在垂直方向上靠下对齐。
• align-self-center: 元素在垂直方向上居中对齐。
• align-self-stretch: 元素在垂直方向上拉伸至父容器的高度。

以下是一个示例代码：

<div class="flex flex-col h-64 justify-center">
  <div class="w-20 h-20 bg-red-500 align-self-start"></div>
  <div class="w-20 h-20 bg-blue-500"></div>
  <div class="w-20 h-20 bg-green-500 align-self-end"></div>
</div>

上面的代码创建了一个垂直方向的 flex 布局，其中三个子元素使用了不同的 align-self 类名。第一个子元素使用了 align-self-start，它靠上对齐；第二个子元素没有使用 align-self 类名，它处于默认的自动对齐状态；第三个子元素使用了 align-self-end，它靠下对齐。最终的效果如下图所示：

总结

justify-self 和 align-self 类名可以帮助我们轻松地控制一个元素在其父容器中的水平和垂直位置。在实际的开发过程中，我们可以根据具体的需求选择合适的类名来实现不同的布局效果。当然，我们也可以将它们与其他的 Tailwind 类名组合起来，来实现更加复杂的布局效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bc94e7add4f0e0ff52eddd