笙亿网络策划

Tailwind CSS 布局怎么做？网格和Flexbox实用技巧？

约 8 分钟读完 1 阅
文章导读
上一个 测验 下一个 Tailwind CSS Layout 由一系列基于重要主题的 utility classes 组成，用于创建有效的布局。它包括与元素定位、元素浮动、Columns、Z index、Container 等相关的主题。
📋 目录
  1. A Tailwind CSS 布局参考
  2. B Tailwind CSS 布局示例
A A

Tailwind CSS - 布局

上一个
测验
下一个

Tailwind CSS Layout 由一系列基于重要主题的 utility classes 组成，用于创建有效的布局。它包括与元素定位、元素浮动、Columns、Z index、Container 等相关的主题。

Tailwind CSS 布局参考

以下列出的主题可用于在元素上创建有效的布局。

主题 描述 示例
Tailwind CSS - Aspect Ratio Aspect ratio 用于定义元素的期望宽度和高度。
试试看
Tailwind CSS - Container Container 用于在不同断点下固定元素的宽度。
试试看
Tailwind CSS - Columns Columns utility 用于控制元素内的列数。
试试看
Tailwind CSS - Break After Break After 用于在元素后强制产生列断点或页面断点。
试试看
Tailwind CSS - Break Before Break Before 用于在元素前强制产生列断点或页面断点。
试试看
Tailwind CSS - Break Inside Break Inside 提供了一种方式，控制列或页面在元素内部如何断开。
试试看
Tailwind CSS - Box Decoration Break Box Decoration Break 演示了当元素被分割时，装饰属性应如何在多行、列或页面上渲染。
试试看
Tailwind CSS - Box Sizing Box Sizing 定义了元素的宽度和高度如何计算为元素的总大小。
试试看
Tailwind CSS - Display Display 用于确定元素在文档中的显示方式。
试试看
Tailwind CSS - Float Float 用于控制元素或内容的流动。
试试看
Tailwind CSS - Clear Clear 用于控制内容围绕元素的环绕方式。
试试看
Tailwind CSS - Isolation Isolation 用于显式创建一个新的层叠上下文。
试试看
Tailwind CSS - Object Fit Object fit 用于调整图像或视频在其容器内的适应方式。
试试看
Tailwind CSS - Object Position Object Position 用于在容器内定位对象。
试试看
Tailwind CSS - Overflow Overflow 用于处理过大的内容。
试试看
Tailwind CSS - Overscroll Behavior Overscroll Behavior 用于处理元素的溢出行为。
试试看
Tailwind CSS - Position Position 用于在 Document Object Model 中对齐元素。
试试看
Tailwind CSS - Top/Right/Bottom/Left Top/Right/Bottom/Left 用于对齐定位元素。
试试看
Tailwind CSS - Visibility Visibility 用于控制元素的可见性。
试试看
Tailwind CSS - Z Index Z index 用于控制元素的层叠顺序。
试试看

Tailwind CSS 布局示例

下面的示例将让您对布局类有一个简要了解

示例 1

在下面的示例中，我们将介绍前面提到的部分类

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-2">
    <h1 class="text-2xl">
        Tailwind CSS Display- Inline-Block and Floats Class
    </h1>
    <h2 class="text-xl my-2
                text-violet-600">
        Display - Inline-block
    </h2>
    <li class="inline-block h-12  w-32
                border-2 rounded p-1 
                border-blue-700">
        Inline-Block 1
    </li>
    <li class="inline-block  h-12  w-32
                border-2 rounded p-1 
                border-rose-700">
        Inline-Block 2
    </li>
    <li class="inline-block h-12  w-32
                border-2 rounded p-1 
                border-fuchsia-700">
        Inline-Block 3
    </li>
    <h2 class="text-xl my-2 float-ri
                text-violet-600">
        Float Class On Inline-Block 
    </h2>
    
    <p>
        In this example we have used we have Float-right
        property with inline-block element which floated 
        those element in the right.
    </p>
    
    <div class="float-right mt-3">
        <li class="inline-block h-12  w-32
                    border-2 rounded p-1 
                    border-blue-700">
        Inline-Block 1
    </li>
    <li class="inline-block h-12  w-32
                border-2 rounded p-1 
                border-rose-700">
        Inline-Block 2
    </li>
    <li class="inline-block h-12  w-32
                border-2 rounded p-1 
                border-fuchsia-700">
        Inline-Block 3
    </li>
    </div>
</body>

</html>

示例 2

在下面的示例中，我们将介绍 Tailwind CSS 的 Right-0 和 Visibility 类。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-3xl">
        Tailwind CSS Right-0 Class
    </h1>
    <div class="relative h-28 w-28 
                bg-lime-300 m-4">
        <div class="absolute right-0 
                    w-9 h-9 bg-lime-700"></div>
    </div>
    
    <h2 class="text-2xl">
        Tailwind CSS Visibility class
    </h2>
    <p>
        在下面的示例中，Invisible 类被应用到内部 div 上，它将被隐藏
        但仍会在布局中占用空间。
    </p>
    <div class="relative h-28 w-28 
                bg-lime-300 m-4">
        <div class="absolute right-0 invisible
                    w-9 h-9 bg-lime-700"></div>
    </div>
</body>
</html>