详细解释className中的各项

详细解释className中的各项

eeeeeeeeeeeeeeeeeee

💡 className 属性详细解释：

<div className="flex h-screen">
  <div className="flex-1 bg-gray-100"></div>
  <div className="w-1/4 min-w-[320px] max-w-[560px] h-full bg-white shadow-lg"></div>
</div>

这段代码使用了 Tailwind CSS 的类名来进行页面布局和样式设置。

---

✅ 外层容器：<div className="flex h-screen">

1. flex

   • 定义了一个弹性盒模型容器。
   • 子元素会自动变为弹性项（flex items），可以使用 flex-grow、flex-shrink 和 flex-basis 控制其大小。
   • 子元素默认按水平方向排列。

2. h-screen

   • 高度占满整个视口（viewport），等同于 height: 100vh。
   • 视口高度会随窗口大小变化。

---

✅ 左侧容器：<div className="flex-1 bg-gray-100">

1. flex-1

   • 使用弹性增长因子，表示占据父容器剩余的全部可用空间。
   • 等价于：

   flex-grow: 1;   /* 填充剩余空间 */
   flex-shrink: 1; /* 可收缩 */
   flex-basis: 0;  /* 初始大小为0 */
   

2. bg-gray-100

   • 背景颜色为浅灰色。
   • 等同于：

   background-color: #f3f4f6; /* Tailwind 中 gray-100 的色值 */
   

---

✅ 右侧容器：<div className="w-1/4 min-w-[320px] max-w-[560px] h-full bg-white shadow-lg">

1. w-1/4

   • 宽度占父容器的 1/4，等同于 width: 25%。

2. min-w-[320px]

   • 宽度最小为 320px。
   • 使用 Tailwind 的任意值语法 [value]，表示自定义宽度。

3. max-w-[560px]

   • 宽度最大为 560px。
   • 避免页面变宽时右侧面板过大。

4. h-full

   • 高度为100%，填充父容器的高度。

5. bg-white

   • 背景颜色为白色。
   • 等同于：

   background-color: #ffffff;
   

6. shadow-lg

   • 添加大型阴影效果。
   • 等同于：

   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
               0 4px 6px -2px rgba(0, 0, 0, 0.05);
   

---

🚀 效果总结

• 外层容器使用 flex 布局，将左、右两部分水平排列。
• 左侧部分：
  • 弹性布局，占据剩余空间。
  • 浅灰色背景。
• 右侧部分：
  • 宽度固定为页面的1/4，最小320px，最大560px。
  • 高度100%，白色背景，带阴影。

✅ 这种布局方式简洁、灵活且易于维护。