使用Media Query和Flexbox实现响应式布局失效问题排查

你的代码逻辑本身没问题，但屏幕宽度≥700px时，元素没有横向排列的原因是margin导致的宽度溢出：

• 你给.item设置了margin:10px，每个元素左右各占10px外边距
• 当设置.item {width:50%}时，元素的实际占用宽度是50% + 20px（左右margin总和）
• 两个元素总宽度超过容器100%，触发flex-wrap: wrap换行，所以看起来还是纵向排列

修复方案（二选一即可） #

方案1：用calc计算实际宽度

通过calc把margin的宽度从50%中减去，确保元素总占用宽度不超过容器：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}

.item {
  margin: 10px;
  border: 1px solid lightgray;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}

@media screen and (min-width:700px) {
  .item {
    width: calc(50% - 20px); /* 减去左右margin的总和20px */
  }
  .container {
    flex-direction: row;
  }
}

方案2：用flex gap代替margin

使用flex容器的gap属性设置元素间距，避免margin导致的宽度计算问题：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 20px; /* 替代item的margin，设置元素间距 */
}

.item {
  border: 1px solid lightgray;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}

@media screen and (min-width:700px) {
  .item {
    width: 50%;
  }
  .container {
    flex-direction: row;
  }
}

效果说明 #

修复后：

• 屏幕宽度<700px：元素纵向排列，宽度100%
• 屏幕宽度≥700px：元素横向并排，各占容器50%宽度

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