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>
打印页面
上一页
下一页
广告