Tailwind CSS - Flex 布局换行

Tailwind CSS Flex Wrap 是一个实用程序类，用于指定弹性项目在其容器内如何换行。此类指定弹性项目是否换行。

Tailwind CSS Flex Wrap 类

以下是Tailwind CSS Flex Wrap 类的列表，用于指定弹性项目的换行行为。

类名	CSS 属性
flex-wrap	flex-wrap: wrap;
flex-wrap-reverse	flex-wrap: wrap-reverse;
flex-nowrap	flex-wrap: nowrap;

Tailwind CSS Flex Wrap 功能

flex-wrap: 此类替换 CSS flex-wrap: wrap; 属性。此类允许弹性项目换行到多行。
flex-wrap-reverse: 此类替换 CSS flex-wrap: wrap-reverse; 属性。此类允许弹性项目以反向方向换行。
flex-nowrap: 此类替换 CSS flex-wrap: nowrap; 属性。此类不允许弹性项目换行。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS Flex Wrap 类示例

以下示例将说明 Tailwind CSS Flex Wrap 类实用程序。

Tailwind CSS Flex Wrap

以下示例说明了 flex-wrap 类的用法。

示例

Open Compiler

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Wrap Class
    </h2>
    <div class="flex flex-wrap 
                bg-gray-200 h-48 border-2 border-black">
        
        <div class="bg-green-600 p-4 w-1/2">
            Item 1
        </div>
        <div class="bg-green-500 p-4 w-1/2">
            Item 2
        </div>
        <div class="bg-green-400 p-4 w-1/2">
            Item 3
        </div>
        <div class="bg-green-300 p-4 w-1/2">
            Item 4
        </div>
        <div class="bg-green-200 p-4 w-1/2">
            Item 5
        </div>
        <div class="bg-green-100 p-4 w-1/2">
            Item 6
        </div>
    </div>
</body>

</html>

Tailwind CSS Flex Nowrap

以下示例说明了 flex-nowrap 类的用法。

示例

Open Compiler

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Nowrap Class
    </h2>
    <div class="flex flex-nowrap bg-gray-200 h-48 
                border-2 border-black">
        
        <div class="bg-green-600 p-4 w-1/2">
            Item 1
        </div>
        <div class="bg-green-500 p-4 w-1/2">
            Item 2
        </div>
        <div class="bg-green-400 p-4 w-1/2">
            Item 3
        </div>
        <div class="bg-green-300 p-4 w-1/2">
            Item 4
        </div>
        <div class="bg-green-200 p-4 w-1/2">
            Item 5
        </div>
        <div class="bg-green-100 p-4 w-1/2">
            Item 6
        </div>
    </div>
</body>

</html>

Tailwind CSS Flex Wrap Reverse 类

以下示例说明了 flex-wrap-reverse 类的用法。

示例

Open Compiler

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Wrap Reverse Class
    </h2>
    <div class="flex flex-wrap-reverse bg-gray-200 h-48 
                border-2 border-black">
        
        <div class="bg-green-600 p-4 w-1/2">
            Item 1
        </div>
        <div class="bg-green-500 p-4 w-1/2">
            Item 2
        </div>
        <div class="bg-green-400 p-4 w-1/2">
            Item 3
        </div>
        <div class="bg-green-300 p-4 w-1/2">
            Item 4
        </div>
        <div class="bg-green-200 p-4 w-1/2">
            Item 5
        </div>
        <div class="bg-green-100 p-4 w-1/2">
            Item 6
        </div>
    </div>
</body>

</html>

打印页面