如何实现Flexbox响应式布局：四盒子适配PC与移动端

原代码存在的问题 #

• HTML中重复使用id="box"，ID在文档中必须唯一，会导致样式无法正确作用于所有盒子，应改用class。
• 未设置box-sizing: border-box，盒子的padding和border会额外占用宽度，导致大屏下四个盒子总宽度超过容器，出现溢出或无法均分。
• 大屏模式下未给子盒子设置弹性占比，无法实现各占25%宽度的效果。

修正后的HTML代码 #

<div class="flex-container">
  <p class="box"><strong><a>Box 1</a></strong></p>
  <p class="box"><strong><a>Box 2</a></strong></p>
  <p class="box"><strong><a>Box 3</a></strong></p>
  <p class="box"><strong><a>Box 4</a></strong></p>
</div>

修正后的CSS代码 #

/* 全局盒模型设置，避免padding/border溢出 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.box {
  border: 15px solid blue;
  padding: 15px;
  text-align: center;
  /* 让每个盒子均分容器可用宽度 */
  flex: 1;
}

/* 小屏断点可根据实际需求调整，这里以600px为例 */
@media screen and (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
  .box {
    width: 100%;
    /* 可选：添加间距优化列布局视觉效果 */
    margin-bottom: 10px;
  }
}

关键说明 #

1. box-sizing: border-box：确保盒子的padding和border被包含在设定宽度内，避免大屏下宽度溢出，保证25%均分计算准确。
2. .box { flex: 1 }：这是大屏均分的核心，让每个子盒子平分flex容器的可用空间，自动占据25%宽度（无额外空隙时）。
3. 媒体查询中切换为flex-direction: column，并设置.box { width: 100% }，确保小屏模式下每个盒子填满屏幕宽度。

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