flex布局中不同宽度的子元素如何在同一行排列不换行？

安全阿岳

2026-9-28

问题原因

盒模型计算偏差：默认box-sizing: content-box规则下，设置的width属性仅包含内容宽度，边框宽度会额外叠加，3个子项合计6px的边框+99%的内容宽度，超出父容器100%宽度阈值触发换行。
图片固定宽度撑爆父容器：img设置了固定width:500px，会强制撑开父级.pic_block的宽度，导致百分比宽度设置失效。
flex属性与固定宽度冲突：flex: 1 1 auto开启了自动伸缩，和手动设置的百分比宽度逻辑冲突，干扰布局计算。

修复方案

直接替换原有CSS为以下代码即可实现预期布局：

/* 统一盒模型规则，避免宽度计算偏差 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.pic_container{
  display: flex;
  flex-wrap: wrap;
  width:100%;
  height:1100px;
  background-color: black;
}

.pic_block{
  border: 1px solid white;
  height: 50%; /* 两行平分父容器高度 */
}

#block1, #block2, #block5, #block6{
  width:30%;
}

#block3, #block4{
  width:40%; /* 30%+30%+40%刚好占满整行宽度 */
}

.pic_block img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填满父容器，保持比例裁剪多余部分，需无裁剪可改为contain */
}