CSS两端定位场景下flex布局元素无法靠边问题咨询

• HTML标签嵌套错误：代码中存在多余未闭合的div标签，浏览器自动修正DOM结构后，container2的父级参考元素和宽度计算完全偏离预期，是布局错位的核心诱因。
• CSS属性使用逻辑冲突：
  • 静态定位（默认position:static）的元素不识别left/right偏移属性，第一版代码中box3、box4未设置非static定位，写的左右偏移规则完全不生效。
  • 第一版代码给container2设置了width: 50%，加上父级的text-align: center属性，container2本身会被居中在父容器中间，仅占一半宽度，就算justify-content: space-between生效，子元素也只能在这一半宽度内两端对齐，不可能贴到页面最外侧。
  • 第二版全flex代码中，错误给box3、box4添加了position: absolute，绝对定位元素会完全脱离flex文档流，flex容器的对齐规则对脱离流的元素不生效，两种布局规则同时控制同一组元素必然出现异常。
• 浏览器默认样式干扰：浏览器内置样式会给body、标题标签添加默认margin，没有重置的话就算手动给元素设置margin为0，页面四周也会残留默认空白。

• 第一步：修正HTML结构，删除多余的未闭合标签，保证嵌套层级正确，参考代码：

<div class="container">
  <div id="box1">
    <h3>Box 1</h3>
  </div>
  <div id="box2">
    <h3>Box 2</h3>
  </div>
  <div class="container2">
    <div id="box3">
      <h3>Box 3</h3>
    </div>
    <div id="box4">
      <h3>Box 4</h3>
    </div>
  </div>
</div>

• 第二步：统一布局逻辑，避免规则冲突：
  用flex实现两端对齐时，不要给flex子项设置绝对定位。将container2的宽度设为100%，保留display: flex和justify-content: space-between即可让box3、box4自动对齐到容器两侧，不需要额外添加左右偏移属性。如果选择用绝对定位实现布局，就给对应父容器设置position: relative，子元素设置position: absolute后再配置偏移值，不要同时用flex规则控制同一批绝对定位元素。
• 第三步：清除浏览器默认边距，在CSS文件最开头添加全局重置规则，避免默认样式干扰：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• 第四步：如果需要上下两组盒子对齐到同一容器的左右边缘，保证container和container2宽度一致即可，不要给container2单独设置50%宽度。

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