CSS flex与relative 的使用和区别

在 CSS 中，flex 和 relative 是两种不同的布局方式，分别属于 Flexbox（弹性盒子） 和 定位（Positioning） 系统。它们的作用和用法完全不同，下面详细解释它们的 使用方式 和 主要区别。

1. display: flex（弹性盒子布局）

作用

• 用于 容器（父元素），控制其 子元素（flex items） 的排列方式。
• 可以实现 水平/垂直对齐、自动分配空间、换行、顺序调整 等。

主要属性

容器属性（父元素）

.container {
  display: flex; /* 启用 Flexbox */
  flex-direction: row | column; /* 主轴方向（行/列） */
  justify-content: center | space-between; /* 主轴对齐方式 */
  align-items: center | flex-start; /* 交叉轴对齐方式 */
  flex-wrap: wrap | nowrap; /* 是否换行 */
  gap: 10px; /* 子元素间距 */
}

子元素属性

.item {
  flex-grow: 1; /* 占据剩余空间 */
  flex-shrink: 0; /* 是否允许缩小 */
  flex-basis: 100px; /* 初始大小 */
  order: 1; /* 调整顺序 */
  align-self: center; /* 单独对齐 */
}

适用场景

✅ 水平/垂直居中布局
✅ 等宽/等高排列
✅ 响应式导航栏
✅ 卡片列表自动换行

2. position: relative（相对定位）

作用

• 用于 单个元素，使其 相对于自身原本的位置 进行偏移。
• 不会脱离文档流，其他元素仍然认为它在原来的位置。

主要属性

.box {
  position: relative; /* 相对定位 */
  top: 10px; /* 向下偏移 10px */
  left: 20px; /* 向右偏移 20px */
  z-index: 1; /* 控制层级 */
}

适用场景

✅ 微调元素位置（不影响其他元素）
✅ 作为 absolute 定位的参照父级（子元素用 position: absolute 时，会相对于 relative 父元素定位）
✅ 叠加元素（如标签、徽章）

3. flex 和 relative 的区别

4. 实际应用示例

示例 1：Flexbox 实现水平居中

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

运行 HTML

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  gap: 10px;
}
.item {
  background: lightblue;
  padding: 10px;
}

效果：两个 item 水平居中排列，间距 10px。

示例 2：Relative 微调元素位置

<div class="box">正常位置</div>
<div class="box relative-box">相对偏移</div>

运行 HTML

.box {
  background: lightcoral;
  padding: 10px;
}
.relative-box {
  position: relative;
  top: 20px; /* 向下偏移 20px */
  left: 30px; /* 向右偏移 30px */
}

效果：第二个 box 向右下方偏移，但其他元素不受影响。

5. 总结

如果你想让 多个子元素自动排列，用 flex；
如果你想让 某个元素稍微偏移，用 relative。

如果有具体需求，可以告诉我，我帮你写代码！ 😊