如何简化4块布局的HTML/CSS代码？窗口缩放边框不重叠

针对你需要的4块布局需求，用Flexbox可以写出极简且易维护的代码，完全替代复杂的传统布局方式，同时解决边框遮挡、间距自适应的问题。

核心实现逻辑 #

利用Flex容器的原生对齐属性自动分配空间，配合box-sizing: border-box确保边框不会撑开元素尺寸，从根源避免边框重叠问题。

完整简化代码 #

HTML结构 #

<div class="layout-container">
  <div class="block block-left">左侧块</div>
  <div class="block block-middle-1">中间块1</div>
  <div class="block block-middle-2">中间块2</div>
  <div class="block block-right">右侧块</div>
</div>

CSS代码 #

/* 全局统一盒模型，消除默认边距干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.layout-container {
  display: flex;
  align-items: center; /* 垂直方向居中，可按需调整 */
  min-height: 100vh; /* 让容器占满视口高度，可按需调整 */
  padding: 0 15px; /* 避免窗口缩到最小时区块贴边 */
  gap: 12px; /* 区块间的基础间距，缩放时会自动适配 */
}

/* 左右侧区块：固定宽度，禁止缩放 */
.block-left, .block-right {
  width: 130px;
  flex-shrink: 0;
}

/* 中间两个区块：平分剩余空间，自动居中 */
.block-middle-1, .block-middle-2 {
  flex: 1;
  min-width: 160px; /* 防止缩得太小，可按需修改 */
}

/* 通用区块样式 */
.block {
  border: 2px solid #222;
  padding: 24px;
  text-align: center;
}

方案优势 #

1. 彻底抛弃复杂的float、position手动计算，用Flex原生属性自动处理对齐和间距
2. box-sizing: border-box让边框包含在元素尺寸内，完全解决边框遮挡问题
3. 响应式自动适配：窗口缩放时，中间块自动收缩/扩展，左右块保持宽度，间距由Flex智能分配
4. 代码结构极简，后续调整尺寸、间距只需修改对应属性，维护成本极低

如果需要中间两个块严格居中（即使左右块宽度不同），可以调整容器的对齐规则：

.layout-container {
  display: flex;
  align-items: center;
  min-height: 100vh;
  justify-content: center;
}

.block-left {
  margin-right: auto;
  width: 130px;
  flex-shrink: 0;
}

.block-right {
  margin-left: auto;
  width: 130px;
  flex-shrink: 0;
}

.block-middle-1, .block-middle-2 {
  width: 210px; /* 固定宽度，或保留flex:1自适应 */
  margin: 0 12px; /* 中间块之间的间距 */
}

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