布局与排列

本篇介绍最常用的布局类与弹性盒子控制类。

Display

控制元素的显示方式。常用的包含 block、inline-block、flex 与 grid。

类名	效果说明
block	将元素显示为块级元素
inline-block	将元素显示为行内块级元素

<div class="block bg-blue-100 p-2 mb-2">块级元素</div>
<div class="inline-block bg-blue-200 p-2">行内块元素 1</div>
<div class="inline-block bg-blue-300 p-2">行内块元素 2</div>

块级元素

行内块元素 1

行内块元素 2

Flexbox

控制弹性盒子的排列、对齐与换行。

类名	效果说明
flex	启用弹性盒子布局
justify-between	主轴方向两端对齐
items-center	交叉轴方向居中
gap-4	设置子元素之间的间隔

<div class="flex flex-row justify-between items-center gap-4 bg-gray-100 p-4">
  <div class="bg-red-200 p-4">子项目 1</div>
  <div class="bg-red-300 p-4">子项目 2</div>
  <div class="bg-red-400 p-4 w-full">占据剩余宽度的子项目</div>
</div>

子项目 1

子项目 2

占据剩余宽度的子项目

Grid

控制网格布局。通过 grid-cols-N 控制列数。

类名	效果说明
grid	启用网格布局
grid-cols-3	设置网格为等宽的三列
col-span-2	让项目跨越两列宽度

<div class="grid grid-cols-3 gap-2 bg-gray-100 p-4">
  <div class="bg-green-200 p-4">1</div>
  <div class="bg-green-300 p-4">2</div>
  <div class="bg-green-400 p-4">3</div>
  <div class="bg-green-500 p-4 col-span-2">4 (跨度2)</div>
  <div class="bg-green-600 p-4">5</div>
</div>

1

2

3

4 (跨度2)

5

Position

控制元素的定位类型。需要搭配 top、right、bottom 与 left 属性一同使用。还可以使用 z-index 控制堆叠层级。

类名	效果说明
relative	开启相对定位
absolute	开启绝对定位
z-10	提升元素的层叠顺序
top-4	距离容器顶部间距

<div class="relative h-32 bg-gray-200">
  <div class="absolute top-4 left-4 bg-yellow-300 p-2 z-10">位于上方靠左</div>
  <div class="absolute bottom-4 right-4 bg-yellow-400 p-2">位于下方靠右</div>
</div>

位于上方靠左

位于下方靠右

宽高比与图片填充

控制多媒体内容的比例以及内容的拉伸与裁剪方式。

类名	效果说明
aspect-video	设定为16:9的常用视频比例
aspect-square	设定为一比一的正方形比例
object-cover	保持比例并裁剪图片以填满容器
object-contain	保持比例并完整显示图片

<div class="flex gap-4">
    <div>
        <img class="aspect-square w-32 object-cover bg-gray-300" src="/assets/samples/EDNLuDbtvttdzwo.jpg" alt="方图裁剪示例" />
        <p class="mt-2 text-xs text-slate-600 ">object-cover 会裁剪边缘，优先铺满容器。</p>
    </div>
    <div>
        <img class="aspect-video w-48 object-contain bg-gray-300" src="/assets/samples/nHLgfpbtvttdzvF.jpg" alt="宽图完整示例" />
        <p class="mt-2 text-xs text-slate-800 ">object-contain 会完整显示图片，可能保留留白。</p>
    </div>
</div>

当前预览限制宽度：384px

object-cover 会裁剪边缘，优先铺满容器。

object-contain 会完整显示图片，可能保留留白。

溢出处理

负责控制内容超出容器边界时的隐藏逻辑与滚动条表现。

类名	效果说明
overflow-hidden	裁剪超出边界的内容且不出现滚动条
overflow-y-auto	垂直方向内容超出容器时自动展示滚动条

<div class="h-20 w-48 bg-gray-100 overflow-y-auto p-2">
  <p>第一行数据文本</p>
  <p>第二行数据文本</p>
  <p>第三行数据文本</p>
  <p>第四行导致滚动条显示</p>
</div>

第一行数据文本

第二行数据文本

第三行数据文本

第四行导致滚动条显示