Tailwind CSS 的 Flexbox 布局类有哪些，如何创建常见的 Flex 布局？ - 面试题

Tailwind CSS 的 Flexbox 布局通过 flex 相关类实现，让开发者能够轻松创建灵活的布局。

基础 Flexbox 类：

flex：启用 Flexbox 布局
inline-flex：启用内联 Flexbox 布局
flex-row：主轴为水平方向（默认）
flex-row-reverse：主轴为水平反向方向
flex-col：主轴为垂直方向
flex-col-reverse：主轴为垂直反向方向

主轴对齐（justify）：

justify-start：主轴起始对齐
justify-end：主轴结束对齐
justify-center：主轴居中对齐
justify-between：主轴两端对齐，项目之间间隔相等
justify-around：主轴两端对齐，项目周围间隔相等
justify-evenly：主轴均匀分布，项目之间间隔相等

交叉轴对齐（items）：

items-start：交叉轴起始对齐
items-end：交叉轴结束对齐
items-center：交叉轴居中对齐
items-baseline：基线对齐
items-stretch：拉伸以填充容器（默认）

多行对齐（content）：

content-start：多行起始对齐
content-end：多行结束对齐
content-center：多行居中对齐
content-between：多行两端对齐
content-around：多行周围间隔相等
content-evenly：多行均匀分布

Flex 项目属性：

flex-1：flex: 1 1 0%
flex-auto：flex: 1 1 auto
flex-initial：flex: 0 1 auto
flex-none：flex: none
flex-grow-0：flex-grow: 0
flex-grow：flex-grow: 1
flex-shrink-0：flex-shrink: 0
flex-shrink：flex-shrink: 1
flex-wrap：允许换行
flex-nowrap：不允许换行（默认）
flex-wrap-reverse：反向换行

常用布局示例：

水平居中：

html
<div class="flex justify-center items-center h-screen">
  居中内容
</div>

导航栏：

html
<nav class="flex justify-between items-center p-4">
  <div class="font-bold">Logo</div>
  <ul class="flex space-x-4">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

卡片网格：

html
<div class="flex flex-wrap gap-4">
  <div class="flex-1">Card 1</div>
  <div class="flex-1">Card 2</div>
  <div class="flex-1">Card 3</div>
</div>

垂直布局：

html
<div class="flex flex-col space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

响应式布局：

html
<div class="flex flex-col md:flex-row">
  <div class="flex-1">Sidebar</div>
  <div class="flex-3">Content</div>
</div>

间距控制：

space-x-*：水平间距

html
<div class="flex space-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

space-y-*：垂直间距

html
<div class="flex flex-col space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

最佳实践：

使用语义化的 HTML 结构
合理使用 flex 属性控制布局
结合响应式前缀创建自适应布局
使用间距类控制项目间距
测试不同屏幕尺寸的显示效果