Flex 布局中子元素强制固定宽度的完美解决方案

在 Flex 布局中，子元素的宽度可能会被自动调整（收缩或扩展），这导致很多开发者困扰：如何让子元素始终保持固定的 150px 宽度？本文将为您提供几种实用的解决方案。

问题背景

当父元素设置了 display: flex 后，子元素的默认行为是会根据容器空间进行弹性伸缩。这在很多情况下是好事，但当我们需要固定宽度时，就需要采取一些特殊措施。

三种推荐解决方案

1️⃣ 使用 flex 简写属性（最推荐）

.child {
  flex: 0 0 150px; /* 不放大 不缩小 基准150px */
}

flex: 0 0 150px 等价于同时设置：flex-grow: 0、flex-shrink: 0、flex-basis: 150px

2️⃣ 使用 flex: none

.child {
  flex: none;
  width: 150px;
}

flex: none 等价于 flex: 0 0 auto，然后再通过 width 设置具体宽度。

3️⃣ 分别设置各项属性

.child {
  width: 150px;
  flex-shrink: 0;  /* 防止缩小 */
  flex-grow: 0;    /* 防止放大 */
}

完整示例

让我们通过一个完整的示例来看看效果：

<div class="parent">
  <div class="child">固定150px</div>
  <div class="child">固定150px</div>
  <div class="child">固定150px</div>
</div>

.parent {
  display: flex;
  gap: 10px;
}

.child {
  flex: 0 0 150px;
  /* 或者选择其他方案 */
  /* flex: none; width: 150px; */
  /* width: 150px; flex-shrink: 0; flex-grow: 0; */
}

属性详细说明

• flex-grow: 0 - 不占用剩余空间，防止放大
• flex-shrink: 0 - 空间不足时不缩小，保持原尺寸
• flex-basis: 150px - 基准宽度设为 150px

额外注意事项

在某些特殊情况下，如果内容超出了 150px 的限制，可能还需要添加额外的保护措施：

.child {
  flex: 0 0 150px;
  min-width: 150px;  /* 额外保险，防止缩小 */
  max-width: 150px;  /* 防止内容撑开 */
}

总结

在 Flex 布局中强制子元素保持固定宽度，推荐使用 flex: 0 0 150px 这种简洁明了的方式。它既符合语义化，又能确保在各种情况下都能正常工作。选择哪种方案主要取决于您的代码风格偏好，但第一种方式因其简洁性而最为推荐。