Flexbox左右分栏（60%/40%）布局重叠、对齐异常求助

你的问题出在盒模型的默认行为上：.box_1设置了width:60%，但内部的img加了padding: 0 1.5rem 2rem 1.5rem，而默认的box-sizing: content-box会让padding额外增加元素宽度，导致.box_1实际宽度是60% + 3rem，再加上.box_2的40%，总宽度超过父容器的100%，两个容器就挤在一起重叠了。

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

方案1：给.box_1设置border-box盒模型

把padding移到.box_1上，让padding包含在60%的宽度内：

.mid_content {
  display: flex;
  width: 100%;
  margin-top: 2rem;
}

.box_1 {
  display: flex;
  width: 60%;
  flex-flow: column wrap;
  box-sizing: border-box; /* 让padding算在宽度内 */
  padding: 0 1.5rem 2rem 1.5rem; /* 把img的padding移到父容器 */
}

.box_1 img {
  width: 100%;
  height: auto;
  padding: 0; /* 移除img的padding */
}

/* 其他CSS保持不变 */

方案2：直接给img设置border-box

如果只想针对img处理，也可以给img加盒模型设置：

.box_1 img {
  width: 100%;
  height: auto;
  padding: 0 1.5rem 2rem 1.5rem;
  box-sizing: border-box; /* 让padding包含在img的100%宽度内 */
}

代码规范建议 #

1. 代码粘贴方式：在Stack Exchange这类平台，直接用代码块包裹（开头写html或css，结尾写```），平台会自动高亮格式化，不需要嵌套<pre><code>。
2. 语义化类名：把.box_1改成.main-section，.box_2改成.sidebar，.box_2_1/2/3改成.sidebar-item，代码可读性会更高。
3. 用CSS控制间距：不要用<br />来换行加间距，比如给<p>加margin-bottom: 1.5rem，给<footer>加margin-top: 1rem，样式控制更灵活。

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