嵌套Div中flex justify-content:space-between不生效问题求助

问题解决及响应式优化方案 #

1. 修复两端对齐问题

核心原因是承载额外信息的容器未充分利用父元素宽度，且列宽被固定限制导致没有足够空间分配间距。调整如下：

• 修改 .divExtraInfo 的样式，移除固定宽限，改为弹性分配空间：

.divExtraInfo {
  min-width: 120px;
  flex: 1; /* 让列自适应剩余空间，均匀分配宽度 */
}

• 确保 #spaceBetween 容器占满父元素宽度，并应用两端对齐：

#spaceBetween {
  display: flex;
  justify-content: space-between;
  width: 100%; /* 占满父元素宽度 */
}

2. 实现响应式布局

避免固定尺寸，改用相对单位和弹性布局适配不同屏幕：

• 调整 .cityStats 样式，使用弹性换行和响应式宽度：

.cityStats {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: 12px;
  width: clamp(400px, 80vw, 600px); /* 最小400px，最大600px，中间按屏幕宽度80%适配 */
  text-align: left;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap; /* 小屏幕下自动换行 */
  gap: 1.5rem; /* 用gap替代固定margin，保持列间距一致 */
}

• 替换固定字体大小为响应式单位：

#temperature {
  font-size: clamp(50px, 10vw, 82px); /* 根据屏幕宽度动态调整字体大小 */
  margin: 0; /* 移除固定margin，改用gap控制间距 */
}

#temperature span {
  font-size: clamp(36px, 7vw, 60px);
}

p {
  color: whitesmoke;
  font-size: clamp(18px, 3vw, 32px);
  font-weight: 300;
  margin: 0;
}

完整修改后的代码

CSS:

* {
  background-color: rgb(41, 35, 35);
  font-family: 'Rubik', sans-serif;
}

body {
  background-color: rgb(41, 35, 35);
  position: relative;
  display: flex;
  height: 96vh;
  width: 98vw;
}

p {
  color: whitesmoke;
  font-size: clamp(18px, 3vw, 32px);
  font-weight: 300;
  margin: 0;
}

.divSearch {
  position: absolute;
  top: 0;
  right: 0;
}

#searchBar {
  width: 260px;
  height: 42px;
  margin-right: 10px;
}

#searchIcon {
  width: 42px;
  height: 48px;
  background-color: rgb(71, 71, 63)
}

.recentCity {
  font-size: clamp(16px, 2.5vw, 26px);
  font-weight: 300;
  margin: 12px;
}

.cityStats {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: 12px;
  width: clamp(400px, 80vw, 600px);
  text-align: left;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 1.5rem;
}

#temperature {
  font-size: clamp(50px, 10vw, 82px);
}

#temperature span {
  font-size: clamp(36px, 7vw, 60px);
  font-weight: 300;
}

.divExtraInfo {
  min-width: 120px;
  flex: 1;
}

#spaceBetween {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

HTML:

<div class="cityStats">
  <div id="divTemperature">
    <p id="temperature"> 19°<span>C</span></p>
  </div>
  <div class="divExtraInfo">
    <p id="city">Rosario</p>
    <p id="weatherText"> <span id="weatherIcon">☀</span> Sunny</p>
  </div>
  <div class="divExtraInfo" id="spaceBetween">
    <div>
      <p id="windSpeed"> Wind</p>
      <p id="humidity">Humidity</p>
    </div>
    <div>
      <p id="windSpeedKM"> 32km/h</p>
      <p id="humidity%">62%</p>
    </div>
  </div>
</div>

效果说明

• 额外信息列的标签（如Humidity）和数值（如62%）会自动两端对齐，无需静态边距。
• 布局会根据屏幕宽度自适应调整，小屏幕下列会自动换行避免溢出。
• 字体大小随屏幕尺寸动态变化，保证在不同设备上的可读性。

内容的提问来源于stack exchange，提问作者Valentín Sanabria