Tailwind CSS Flexbox #

弹性容器 #

启用 Flexbox #

html

<!-- 块级弹性容器 -->
<div class="flex">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 内联弹性容器 -->
<div class="inline-flex">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

弹性方向（Flex Direction） #

主轴方向 #

html

<!-- 水平方向，从左到右（默认） -->
<div class="flex flex-row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- 水平方向，从右到左 -->
<div class="flex flex-row-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- 垂直方向，从上到下 -->
<div class="flex flex-col">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- 垂直方向，从下到上 -->
<div class="flex flex-col-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

响应式方向 #

html

<!-- 移动端垂直，桌面端水平 -->
<div class="flex flex-col md:flex-row">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

弹性换行（Flex Wrap） #

html

<!-- 不换行（默认） -->
<div class="flex flex-nowrap">
  <div class="w-64">项目 1</div>
  <div class="w-64">项目 2</div>
  <div class="w-64">项目 3</div>
</div>

<!-- 换行 -->
<div class="flex flex-wrap">
  <div class="w-64">项目 1</div>
  <div class="w-64">项目 2</div>
  <div class="w-64">项目 3</div>
</div>

<!-- 反向换行 -->
<div class="flex flex-wrap-reverse">
  <div class="w-64">项目 1</div>
  <div class="w-64">项目 2</div>
  <div class="w-64">项目 3</div>
</div>

主轴对齐（Justify Content） #

控制项目在主轴上的对齐方式：

html

<!-- 起点对齐（默认） -->
<div class="flex justify-start">
  <div>项目</div>
</div>

<!-- 终点对齐 -->
<div class="flex justify-end">
  <div>项目</div>
</div>

<!-- 居中对齐 -->
<div class="flex justify-center">
  <div>项目</div>
</div>

<!-- 两端对齐 -->
<div class="flex justify-between">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 环绕对齐 -->
<div class="flex justify-around">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 均匀对齐 -->
<div class="flex justify-evenly">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

交叉轴对齐（Align Items） #

控制项目在交叉轴上的对齐方式：

html

<!-- 拉伸填满（默认） -->
<div class="flex items-stretch h-32">
  <div>项目</div>
</div>

<!-- 起点对齐 -->
<div class="flex items-start h-32">
  <div>项目</div>
</div>

<!-- 终点对齐 -->
<div class="flex items-end h-32">
  <div>项目</div>
</div>

<!-- 居中对齐 -->
<div class="flex items-center h-32">
  <div>项目</div>
</div>

<!-- 基线对齐 -->
<div class="flex items-baseline h-32">
  <div>项目</div>
</div>

多行对齐（Align Content） #

控制多行在交叉轴上的对齐方式：

html

<!-- 起点对齐 -->
<div class="flex flex-wrap content-start h-64">
  <div class="w-1/3">项目</div>
</div>

<!-- 终点对齐 -->
<div class="flex flex-wrap content-end h-64">
  <div class="w-1/3">项目</div>
</div>

<!-- 居中对齐 -->
<div class="flex flex-wrap content-center h-64">
  <div class="w-1/3">项目</div>
</div>

<!-- 两端对齐 -->
<div class="flex flex-wrap content-between h-64">
  <div class="w-1/3">项目</div>
</div>

<!-- 环绕对齐 -->
<div class="flex flex-wrap content-around h-64">
  <div class="w-1/3">项目</div>
</div>

<!-- 均匀对齐 -->
<div class="flex flex-wrap content-evenly h-64">
  <div class="w-1/3">项目</div>
</div>

单个项目对齐（Align Self） #

控制单个项目在交叉轴上的对齐方式：

html

<div class="flex h-32">
  <div class="self-auto">自动</div>
  <div class="self-start">起点</div>
  <div class="self-end">终点</div>
  <div class="self-center">居中</div>
  <div class="self-stretch">拉伸</div>
  <div class="self-baseline">基线</div>
</div>

弹性增长（Flex Grow） #

html

<!-- 不增长（默认） -->
<div class="flex">
  <div class="grow-0">不增长</div>
  <div class="grow">增长</div>
</div>

<!-- 等比例增长 -->
<div class="flex">
  <div class="grow">项目 1</div>
  <div class="grow">项目 2</div>
  <div class="grow">项目 3</div>
</div>

<!-- 不同比例增长 -->
<div class="flex">
  <div class="grow">1 份</div>
  <div class="grow-[2]">2 份</div>
  <div class="grow-[3]">3 份</div>
</div>

弹性收缩（Flex Shrink） #

html

<!-- 收缩（默认） -->
<div class="flex">
  <div class="shrink">可收缩</div>
  <div class="shrink-0">不收缩</div>
</div>

<!-- 不同比例收缩 -->
<div class="flex">
  <div class="shrink">收缩比例 1</div>
  <div class="shrink-2">收缩比例 2</div>
</div>

弹性基础（Flex Basis） #

html

<!-- 自动 -->
<div class="flex">
  <div class="basis-auto">自动</div>
</div>

<!-- 固定值 -->
<div class="flex">
  <div class="basis-1/4">25%</div>
  <div class="basis-1/2">50%</div>
  <div class="basis-1/4">25%</div>
</div>

<!-- 任意值 -->
<div class="flex">
  <div class="basis-[200px]">200px</div>
</div>

Flex 简写 #

html

<!-- flex: 1 1 0% -->
<div class="flex-1">flex: 1</div>

<!-- flex: 1 1 auto -->
<div class="flex-auto">flex: auto</div>

<!-- flex: 0 1 auto -->
<div class="flex-initial">flex: initial</div>

<!-- flex: none -->
<div class="flex-none">flex: none</div>

常见用法 #

html

<!-- 侧边栏固定，内容区自适应 -->
<div class="flex">
  <aside class="flex-none w-64">侧边栏</aside>
  <main class="flex-1">主内容</main>
</div>

<!-- 等宽分布 -->
<div class="flex">
  <div class="flex-1">项目 1</div>
  <div class="flex-1">项目 2</div>
  <div class="flex-1">项目 3</div>
</div>

顺序（Order） #

html

<div class="flex">
  <div class="order-2">第二</div>
  <div class="order-1">第一</div>
  <div class="order-3">第三</div>
</div>

<!-- 首位 -->
<div class="order-first">首位</div>

<!-- 末位 -->
<div class="order-last">末位</div>

<!-- 无顺序 -->
<div class="order-none">无顺序</div>

间隙（Gap） #

html

<!-- 统一间隙 -->
<div class="flex gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 行间隙 -->
<div class="flex flex-wrap gap-x-4 gap-y-2">
  <div>项目</div>
</div>

实战示例 #

导航栏 #

html

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow">
  <div class="flex items-center space-x-4">
    <span class="font-bold text-xl">Logo</span>
  </div>
  <div class="flex items-center space-x-6">
    <a href="#">首页</a>
    <a href="#">关于</a>
    <a href="#">联系</a>
  </div>
</nav>

卡片布局 #

html

<div class="flex flex-wrap gap-6">
  <div class="flex-1 min-w-[280px] bg-white rounded-lg shadow p-6">
    卡片 1
  </div>
  <div class="flex-1 min-w-[280px] bg-white rounded-lg shadow p-6">
    卡片 2
  </div>
  <div class="flex-1 min-w-[280px] bg-white rounded-lg shadow p-6">
    卡片 3
  </div>
</div>

居中布局 #

html

<!-- 完全居中 -->
<div class="flex items-center justify-center min-h-screen">
  <div class="text-center">
    <h1 class="text-4xl font-bold">居中内容</h1>
  </div>
</div>

两端布局 #

html

<div class="flex justify-between items-center">
  <div>左侧内容</div>
  <div>右侧内容</div>
</div>

圣杯布局 #

html

<div class="flex flex-col min-h-screen">
  <header class="h-16 bg-gray-100">头部</header>
  <div class="flex flex-1">
    <aside class="w-64 bg-gray-200">侧边栏</aside>
    <main class="flex-1 bg-white">主内容</main>
    <aside class="w-64 bg-gray-200">右侧栏</aside>
  </div>
  <footer class="h-12 bg-gray-100">底部</footer>
</div>

底部固定按钮 #

html

<div class="flex flex-col h-screen">
  <main class="flex-1 overflow-y-auto">
    内容区域
  </main>
  <footer class="p-4 bg-white border-t">
    <button class="w-full bg-blue-500 text-white py-2 rounded">
      提交
    </button>
  </footer>
</div>

下一步 #

掌握 Flexbox 后，继续学习 Grid 了解网格布局！