为什么上面的代码 当宽度小于50% .main-mid-up 的宽度还在变小

抱歉，我之前给出的回答有误。根据您提供的代码，`.main-mid-up`元素的宽度会随着浏览器宽度的变化而变小，即使小于50%。这是因为您在`.main-mid-up`的样式中设置了`width: 100%;`，这意味着它将始终占据其父容器的100%宽度。

如果您希望在宽度小于50%时`.main-mid-up`停止缩小，您可以考虑使用媒体查询来调整其样式。例如，您可以在特定的浏览器宽度下更改`.main-mid-up`的宽度。

以下是一个示例：

.main-mid-up {
  flex-wrap: wrap;
  display: flex;
  flex-grow: 1;
  background-color: red;
  height: 5% !important;
  width: 100%;
  justify-content: center;
  align-items: center;
}

@media (max-width: 50%) {
  .main-mid-up {
    width: 50%;
  }
}

在上面的示例中，当浏览器宽度小于50%时，使用媒体查询将`.main-mid-up`的宽度设置为50%。这样，当宽度小于50%时，`.main-mid-up`将停止缩小，并保持50%的宽度。

相关问题

为什么上面的代码 当宽度小于50% .main-mid-up 的宽度还在变小 @media (max-width: 50%) { .main-mid-up { width: 50%; } } 这样设置没有效果,.是因为mid-right { position: absolute; 设置了绝对吗

是的，您的观察是正确的。`.main-mid-up`的宽度在宽度小于50%时仍然会继续缩小，原因是`.mid-right`在`.main-mid-up`中使用了绝对定位，这导致`.main-mid-up`的内容区域宽度受到`.mid-right`的影响。

当`.mid-right`设置为`position: absolute;`时，它会脱离正常的文档流，并且不会占据空间。因此，`.main-mid-up`的内容区域将会收缩以适应剩余空间，导致其宽度小于50%。

要解决这个问题，您可以考虑以下几种方法：

1. 如果不需要`.mid-right`使用绝对定位，可以尝试将其改为其他布局方式，例如使用`float`或`flexbox`来实现所需的布局效果。

2. 如果需要`.mid-right`继续使用绝对定位，可以考虑在`.main-mid-up`中添加一个额外的包裹容器，并将`.mid-right`放在这个容器中，而不是直接放在`.main-mid-up`中。这样可以避免`.mid-right`对`.main-mid-up`宽度的影响。

以下是示例代码：

<div class="main-mid-up">
  <div class="wrapper">
    <!-- 其他内容 -->
    <div class="mid-right">
      <!-- .mid-right 的内容 -->
    </div>
  </div>
</div>

.main-mid-up {
  width: 100%;
  /* 其他样式 */
}

.wrapper {
  position: relative;
  width: 100%;
}

.mid-right {
  position: absolute;
  /* 其他样式 */
}

通过将`.mid-right`放在`.wrapper`容器中，并在`.wrapper`上设置`position: relative;`，可以保持`.main-mid-up`的宽度不受`.mid-right`的影响。

请根据您的实际需求选择适合的解决方案。

.main-mid-up { flex-wrap: wrap; // 实现换行 display: flex; // flex-shrink: 0; //值是1，表示弹性盒子项目是否可以缩小，如果设置为0，表示弹性盒子项目不可以缩小 flex-grow: 1; // 占满剩余空间， background-color: red; height: 5% !important; width: 100%; justify-content: center; /* 将主轴对齐方式改为居中 */ align-items: center; } .mid-left { position: relative; // width: 85%; // 子div中要居中必须加display: flex; 不然没有效果 display: flex; /*水平居中*/ justify-content: center; /*垂直居中*/ align-items: center; min-width: 800px; max-width: 70%; } .mid-right { position: absolute; justify-content: left; // width: 25%; display: flex; justify-content: center; /*水平居中*/ align-items: center; /*垂直居中*/ right: 2%; min-width: 50px; flex-grow: 1; } .main-mid-up 随浏览器宽度变化而变化,当小于50%时.main-mid-up不在变小

根据您提供的代码，`.main-mid-up`具有`flex-wrap: wrap;`和`display: flex;`属性，这样它将在浏览器宽度小于50%时自动换行，并且不会继续缩小。

另外，`.mid-left`和`.mid-right`分别具有`display: flex;`和`justify-content: center; align-items: center;`属性，这将使它们水平和垂直居中。

请注意，您的代码中有一些注释掉的部分，如果需要使用，请取消注释。