Flexbox两等分布局优化：带aspect-ratio的大图与内容区实现

你之前用flex-basis导致布局崩溃，大概率是没给子元素加box-sizing: border-box——默认的content-box盒模型会让子元素的padding、border额外占用宽度，实际尺寸超出50%后就会出现错乱。下面给你一套贴合Flexbox逻辑的解决方案：

核心布局代码 #

父容器样式 #

.info-block {
  display: flex;
  /* 可选：小屏幕自动换行，适配响应式场景 */
  flex-wrap: wrap;
}

子元素（图片/内容区块）样式 #

.info-block__item {
  /* flex: 伸缩比例 收缩比例 初始宽度 */
  flex: 0 0 50%;
  /* 关键：让padding、border包含在元素宽度内，避免溢出 */
  box-sizing: border-box;
  /* 按需添加内边距、间距等样式 */
  padding: 1.5rem;
}

图片自适应处理 #

.info-block__image img {
  width: 100%;
  height: auto;
  display: block;
}

顺序互换的两种灵活方式 #

1. 直接调整HTML结构：把图片区块和内容区块的位置互换，Flexbox会自动按新顺序排列，保持两等分布局。
2. 用order属性控制：无需修改HTML，给需要调换的元素加order值即可。默认所有元素order为0，给图片区块加order: 1，它就会排在内容区块后面；反之给内容区块加order:1，图片就会移到左侧。

方案优势 #

• 用flex: 0 0 50%替代width:50%：这是Flexbox原生的尺寸控制逻辑，flex-basis定义初始宽度，flex-grow:0禁止元素放大，flex-shrink:0禁止元素缩小，比通用的width更贴合Flex布局的设计思路。
• box-sizing: border-box彻底解决了内边距、边框导致的宽度溢出问题，从根源避免布局崩溃。
• 顺序调整成本极低：不管是改HTML还是用CSS的order属性，都能轻松实现左右顺序互换，比Grid布局更灵活（Grid换顺序需要调整模板区域，反而繁琐）。

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