Tailwind CSS - Flex 布局方向

Tailwind CSS Flex 布局方向是一个实用工具类，用于设置Flex容器内Flex项目的排列方向。

Tailwind CSS Flex 布局方向类

以下是Tailwind CSS Flex 布局方向类的列表，这些实用工具有效地设置了Flex项目的初始大小。

类名	CSS 属性
flex-row	flex-direction: row;
flex-row-reverse	flex-direction: row-reverse;
flex-col	flex-direction: column;
flex-col-reverse	flex-direction: column-reverse;

Tailwind CSS Flex 布局方向的功能

flex-row: 此类替换CSS flex-direction: row; 属性。此类使Flex项目能够从左到右排列成一行。

flex-row-reverse: 此类替换CSS flex-direction: row-reverse; 属性。此类使Flex项目能够从右到左反向排列。

flex-col: 此类替换CSS flex-direction: column; 属性。此类使Flex项目能够垂直排列。

flex-col-reverse: 此类替换CSS flex-direction: column-reverse; 属性。此类使Flex项目能够以相反的方向垂直排列。

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 布局方向类示例

以下示例将说明Tailwind CSS Flex 布局方向实用工具类的用法。

水平Flex项目作为行

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

示例

Open Compiler

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-2">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Row
    </h2>
    <div class="inline-flex flex-row">
        <div class="bg-green-500 
                    text-4xl p-3 mr-1.5">One</div>
        <div class="bg-green-400 
                    text-4xl p-3 mr-1.5">two</div>
        <div class="bg-green-300 
                    text-4xl p-3 mr-1.5">three</div>
        <div class="bg-green-200 
                    text-4xl p-3 mr-1.5">four</div>
    </div>
</body> 
</html>

水平Flex项目作为反向行

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

示例

Open Compiler

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

<body class="p-2">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Row Reverse
    </h2>
    <div class="inline-flex flex-row-reverse">
        <div class="bg-green-500 
                    text-4xl p-3 mr-1.5">One</div>
        <div class="bg-green-400 
                    text-4xl p-3 mr-1.5">two</div>
        <div class="bg-green-300 
                    text-4xl p-3 mr-1.5">three</div>
        <div class="bg-green-200 
                    text-4xl p-3 mr-1.5">four</div>
    </div>
</body> 

</html>

垂直Flex项目作为列

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

示例

Open Compiler

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

<body class="p-2">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Col Class
    </h2>
    <div class="inline-flex flex-col">
        <div class="bg-green-500 
                    text-4xl p-3 mb-1.5">One</div>
        <div class="bg-green-400 
                    text-4xl p-3 mb-1.5">two</div>
        <div class="bg-green-300 
                    text-4xl p-3 mb-1.5">three</div>
        <div class="bg-green-200 
                    text-4xl p-3 mb-1.5">four</div>
    </div>
</body>

</html>

垂直Flex项目作为反向列

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

示例

Open Compiler

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

<body class="p-2">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Col Reverse Class
    </h2>
    <div class="inline-flex flex-col-reverse">
        <div class="bg-green-500 
                    text-4xl p-3 mb-1.5">One</div>
        <div class="bg-green-400 
                    text-4xl p-3 mb-1.5">two</div>
        <div class="bg-green-300 
                    text-4xl p-3 mb-1.5">three</div>
        <div class="bg-green-200 
                    text-4xl p-3 mb-1.5">four</div>
    </div>
</body>

</html>

打印页面