Tailwind CSS - Flexbox 和 Grid

上一個
下一個

Tailwind CSS **Flexbox** 和 **Grid** 是一個佈局模組，可以有效地在彈性或網格容器內對齊專案。它包含一系列實用程式類，可以有效地構建彈性和網格容器，例如彈性基準、彈性增長、彈性收縮、網格模板列、網格自動行、間隙等等。

Tailwind CSS Flexbox 和 Grid 參考

下面提到的主題可用於在元素上建立有效的佈局。

主題 描述 示例
Tailwind CSS - 彈性基準 彈性基準用於定義彈性專案的初始大小。
Tailwind CSS - 彈性方向 彈性方向用於設定彈性容器內彈性專案的方向。
Tailwind CSS - 彈性換行 Flex Wrap 實用程式控制彈性專案是否換行。
Tailwind CSS - 彈性 Flex 類指定彈性專案如何在彈性容器內增長和收縮。
Tailwind CSS - 彈性增長 Flex Grow 類指定彈性專案如何在彈性容器內增長。
Tailwind CSS - 彈性收縮 Flex Shrink 類指定彈性專案如何在彈性容器內收縮。
Tailwind CSS - 順序 Order 類指定其容器內彈性和網格專案的順序。
Tailwind CSS - 網格模板列 Grid Template Columns 類指定網格佈局中列的數量和大小。
Tailwind CSS - 網格列開始/結束 Grid Column Start/End 類指定跨網格列的列的排列和大小
Tailwind CSS - 網格模板行 Grid Template Row 指定網格佈局中行數和大小。
Tailwind CSS - 網格行開始/結束 Grid Row Start/End 類指定跨網格行的行的排列和大小
Tailwind CSS - 網格自動流 Grid Auto Flow 類指定元素在網格佈局中的自動對齊方式。
Tailwind CSS - 網格自動列 grid auto columns 類指定隱式建立的網格列的大小。
Tailwind CSS - 網格自動行 Grid Auto Rows 指定隱式建立的網格行的大小。
Tailwind CSS - 間隙 Gap 類用於在網格和彈性專案之間新增空間。
Tailwind CSS - 內容對齊 Justify Content 用於沿主軸或水平面對齊彈性和網格專案。
Tailwind CSS - 專案對齊 Justify Items 用於沿其內聯軸對齊網格專案或網格專案在其網格單元格內的水平對齊方式。
Tailwind CSS - 自身對齊 Justify self 類用於沿其內聯軸對齊單個網格專案。
Tailwind CSS - 內容排列 Align Content 用於將多行彈性容器和網格容器中的行沿交叉軸定位。
Tailwind CSS - 專案排列 Align Items 用於沿容器的交叉軸定位彈性和網格專案。
Tailwind CSS - 自身排列 Align Self 用於沿其容器的交叉軸對齊單個網格和彈性專案。
Tailwind CSS - 內容放置 Place content 類用於同時對齊和調整內容。
Tailwind CSS - 專案放置 Place Items 類用於同時對齊和調整專案。
Tailwind CSS - 自身放置 Place self 類用於同時對齊和調整單個專案。

Tailwind CSS Flexbox 示例

在以下示例中，我們將介紹上面提到的某些 Flexbox 類。

<!DOCTYPE html>
<html>
<head>
        <script src="https://cdn.tailwindcss.com"></script>
</head>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-2">
        Tailwind CSS Flexbox Classes
    </h2>
    <p class="mb-2">
        The following example is illustrating the 
        combine use of Flex, Flex-wrap, Gap, and 
        Order classes. 
        
    </p>
    <div class="flex flex-wrap gap-2 mb-4">
        <div class="bg-red-500 p-4 w-32 h-28 order-5">Item 1</div>
        <div class="bg-blue-500 p-4 w-32 h-28 order-4">Item 2</div>
        <div class="bg-green-500 p-4 w-32 h-28 order-3">Item 3</div>
        <div class="bg-yellow-500 p-4 w-32 h-28 order-2">Item 4</div>
        <div class="bg-orange-500 p-4 w-32 h-28 order-1">Item 5</div>
    </div>
</body>
</html>

Tailwind CSS Grid 示例

在以下示例中，我們將介紹上面提到的某些 Grid 類。

<!DOCTYPE html>
<html>
<head>
        <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-2">
        Tailwind CSS Grid Classes
    </h2>
    <p class="mb-2">
        The following example is illustrating the 
        combine use of Grid, Grid-template-column, Gap, 
        and Place-items classes. 
    </p>
    <div class="grid grid-cols-3 gap-2 p-1 h-44">
        <div class="border-2 border-green-500 p-1 grid
                    place-items-start bg-green-300">
            <div class="bg-orange-500 p-4">
                Item 1
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 grid
                    place-items-start bg-green-300">
            <div class="bg-blue-500 p-4">
                Item 2
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 grid
                    place-items-start bg-green-300">
            <div class="bg-pink-500 p-4">
                Item 3
            </div>
        </div>
    </div>
</body>
</html>
列印頁面
上一頁
下一頁
廣告