如何实现嵌套Flex元素的响应式宽度？

问题根源 #

当前代码无法实现响应式的核心问题：

• 外层.first容器默认flex-wrap: nowrap，屏幕缩小时子元素不会换行，导致横向溢出
• .second作为Flex子元素，未设置宽度限制与弹性分配规则，无法自适应父容器空间
• .four和.five使用固定宽度（width），即使设置了flex-shrink:1，也无法收缩到小于固定宽度值

修改方案 #

调整CSS规则，让嵌套的Flex容器及内部元素具备自适应能力：

.first {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 屏幕不足时自动换行 */
  gap: 10px; /* 可选：给子元素添加间距，优化布局 */
}

.second {
  display: flex;
  align-items: center;
  flex: 1 1 calc(25% - 10px); /* 基础占比25%，可伸缩，减去gap间距 */
  min-width: 300px; /* 最小宽度，避免过度收缩 */
  max-width: 100%; /* 限制最大宽度不超过父容器 */
}

.three {
  height: 8px;
  width: 8px;
  margin: 2px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: red;
}

.four {
  flex: 1 1 262px; /* 用flex-basis替代固定width，允许收缩/扩展 */
  height: 1px;
  border-radius: 2px;
  margin: 0 2px;
  background-color: blue;
  min-width: 100px; /* 可选：设置最小宽度 */
}

.five {
  flex: 1 1 222px; /* 同.four，改用flex属性实现弹性 */
  height: 4px;
  margin: 0 6px;
  background-color: green;
  min-width: 80px; /* 可选：设置最小宽度 */
}

关键修改说明 #

• .first添加flex-wrap: wrap，确保屏幕宽度不足时子元素自动换行
• .second设置flex: 1 1 calc(25% - 10px)，让每个子容器默认占25%宽度，同时支持伸缩；min-width避免过度收缩导致布局混乱
• .four和.five用flex属性替代固定width，让它们能根据父容器宽度自动调整，同时通过min-width保证最小显示尺寸

内容的提问来源于stack exchange，提问作者Leeker