Tailwind CSS - 內容對齊

Tailwind CSS 內容對齊 是一個實用程式類，用於沿主軸或水平面對齊 flex 和 grid 專案。

Tailwind CSS 內容對齊類

以下是Tailwind CSS 內容對齊類列表，有助於有效地沿主軸對齊 flex 和 grid 專案。

類	CSS 屬性
justify-normal	justify-content: normal;
justify-start	justify-content: flex-start;
justify-end	justify-content: flex-end;
justify-center	justify-content: center;
justify-between	justify-content: space-between;
justify-around	justify-content: space-around;
justify-evenly	justify-content: space-evenly;
justify-stretch	justify-content: stretch;

Tailwind CSS 內容對齊類的功能

justify-normal: 此類具有預設行為，根據文字方向正常對齊專案。
justify-start: 此類用於將專案對齊到其容器的開頭。
justify-end: 此類用於將專案對齊到其容器的結尾。
justify-center: 此類用於將專案對齊到其容器的中心。
justify-between: 此類用於沿主軸對齊專案，專案之間留有相等的間距。
justify-around: 此類沿主軸對齊專案，專案周圍留有相等的間距。
justify-evenly: 此類沿主軸對齊專案，專案之間以及專案與容器邊緣之間留有相等的間距。
justify-stretch: 此類拉伸 flex 或 grid 專案以填充容器中的可用空間，同時保持其縱橫比。

Tailwind CSS 內容對齊類示例

以下示例將說明 Tailwind CSS 內容對齊類實用程式。

Flex 專案正常對齊

justify-normal 類設定專案的預設位置，如下例所示。

示例

<!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 Normal Class
    </h2>
    <div class="flex justify-normal gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
</body>

</html>

Flex 專案開頭和結尾對齊

justify-start 和 justify-end 類將 flex 專案定位在沿主軸的起始點和結束點，如下例所示。

示例

<!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 Start Class
    </h2>
    <div class="flex justify-start gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
    <br>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify End Class
    </h2>
    <div class="flex justify-end gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
</body>

</html>

Flex 專案居中對齊

justify-center 類將 flex 專案定位在沿主軸的中心，如下例所示。

示例

<!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 Center Class
    </h2>
    <div class="flex justify-center gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
</body>

</html>

Flex 專案之間和周圍對齊

justify-between 和 justify-around 類設定 flex 專案，使它們沿主軸在專案之間和專案周圍具有相等的間距，如下例所示。

示例

<!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 Between Class
    </h2>
    <div class="flex justify-between gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
    <br>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Around Class
    </h2>
    <div class="flex justify-around gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
</body>

</html>

Flex 專案均勻對齊

justify-evenly 類設定專案之間的均勻間距，如下例所示。

示例

<!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 Evenly Class
    </h2>
    <div class="flex justify-evenly gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
</body>

</html>

Grid 專案拉伸對齊

justify-stretch 類拉伸專案以填充可用空間，如下例所示。

示例

<!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 Stretch Class
    </h2>
    <div class="grid grid-flow-col justify-stretch gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20">1</div>
        <div class="bg-blue-400 h-20">2</div>
    </div>
</body>

</html>

列印頁面