笙亿网络策划

Tailwind CSS justify-self 怎么用？怎么设置元素对齐？

约 12 分钟读完 32 阅
文章导读
Previous Quiz Next Tailwind CSS Justify Self 是一个用于沿其行内轴对齐单个 grid item 的 utility class。
📋 目录
  1. 壹 Tailwind CSS Justify Self 类
  2. 贰 Tailwind CSS Justify Self 类的功能
  3. 叁 Tailwind CSS Justify Self 类示例
  4. 肆 Grid Item 的自动对齐
  5. 伍 Grid 项的起始对齐
  6. 陆 Grid 项的结束对齐
  7. 柒 Grid 项的居中对齐
  8. 捌 Grid 项目的拉伸对齐
A A

Tailwind CSS - Justify Self

Previous
Quiz
Next

Tailwind CSS Justify Self 是一个用于沿其行内轴对齐单个 grid item 的 utility class。

Tailwind CSS Justify Self 类

以下是 Tailwind CSS Justify Self 类列表，这些类有助于沿行内轴有效地单独对齐 grid item。

Class CSS Properties
justify-self-auto justify-self: auto;
justify-self-start justify-self: start;
justify-self-end justify-self: end;
justify-self-center justify-self: center;
justify-self-stretch justify-self: stretch;

Tailwind CSS Justify Self 类的功能

  • justify-self-auto: 该类用于根据其父 grid container 元素的 justify-items 属性值对齐 grid item。
  • justify-self-start: 该类用于将单个 grid item 对齐到其 grid cell 的起始位置。
  • justify-self-end: 该类用于将单个 grid item 对齐到其 grid cell 的结束位置。
  • justify-self-center 该类用于将单个 grid item 对齐到其 grid cell 的中心位置。
  • justify-self-stretch: 该类将单个 grid item 拉伸以填充其 grid cell 中的可用空间。

Tailwind CSS Justify Self 类示例

以下示例将演示 Tailwind CSS Justify Self 类 utility 的用法。

Grid Item 的自动对齐

justify-self-auto 类将单个 grid item 定位基于 grid 的 justify-items 属性值，如以下示例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Self Auto Class
    </h2>
    <div class="grid grid-cols-3 gap-3 justify-items-stretch">
        <div class="bg-green-500 p-4">
            Item 1
        </div>
        <!-- justify-self-auto 类将根据其父 grid container 的 justify-items 属性对齐单个 grid item -->
        <div class="bg-lime-300 p-4 justify-self-auto">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

Grid 项的起始对齐

justify-self-start 类将单个 grid item 设置为位于其 inline axis 的起始位置，如下面的示例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Self Start Class
    </h2>
    <div class="grid grid-cols-3 gap-3 justify-items-stretch">
        <div class="bg-green-500 p-4">
            Item 1
        </div>
        <!--justify-self-start 类将单个 grid item 对齐到其 grid cell 的起始位置-->
        
        <div class="bg-lime-300 p-4 justify-self-start">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

Grid 项的结束对齐

justify-self-end 类将单个 grid item 设置为位于其 inline axis 的结束位置，如下面的示例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Self End Class
    </h2>
    <div class="grid grid-cols-3 gap-3 justify-items-stretch">
        <div class="bg-green-500 p-4">
            Item 1
        </div>
        <!--justify-self-end 类将单个 grid item 对齐到其 inline axis 的结束位置-->
        
        <div class="bg-lime-300 p-4 justify-self-end">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

Grid 项的居中对齐

justify-self-center 类将单个 grid item 设置为位于其 inline axis 的中心位置，如下面的示例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Self Center Class
    </h2>
    <div class="grid grid-cols-3 gap-3 justify-items-stretch">
        <div class="bg-green-500 p-4">
            Item 1
        </div>
        <!--justify-self-center 类将单个 grid item 对齐到其 inline axis 的中心位置-->
        
        <div class="bg-lime-300 p-4 justify-self-center">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

Grid 项目的拉伸对齐

justify-self-stretch 类将单个 grid 项目设置为拉伸以填充其 grid 单元格中的可用空间，如下面的示例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Self Stretch Class
    </h2>
    <div class="grid grid-cols-3 gap-3 justify-items-stretch">
        <div class="bg-green-500 p-4">
            Item 1
        </div>
        <!--justify-self-stretch 类会将单个 
               grid 项目拉伸以填充其行内轴中的可用空间-->
        
        <div class="bg-lime-300 p-4 justify-self-stretch">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>