Flexbox两区块并排显示方法

main {
  display: flex;
  gap: 20px; /* 替代 margin，统一控制间距，不干扰盒模型 */
  width: 100%; /* 确保充分利用可用空间 */
}

section.structure,
section.specificity {
  flex: 1; /* 等分剩余空间，自动适应屏幕变化 */
  min-width: 0; /* 防止内容过长时溢出（尤其含文本/图片时） */
  border-radius: 20px;
  height: 500px;
  background-color: #ffffff;
  border: 1px solid #f5f5f5;
}

若需严格限定每块占 约 50% 屏宽（而非等分），可改用：

section {
  width: calc(50% - 10px); /* 减去 gap 的一半（gap=20px → 每侧留10px） */
}

⚠️ 注意事项：

• 避免对响应式布局使用固定像素宽高（如 width: 500px）。应优先采用相对单位（%, vw, flex）或媒体查询适配；
• gap 属性兼容性良好（Chrome 63+/Firefox 63+/Safari 14.1+），旧版可回退为 margin，但需注意父子 margin 折叠风险；
• 若必须兼容 IE11，请用 display: inline-block + font-size: 0 清除父容器空白符，再重置子元素 font-size，但强烈建议升级技术栈。

总结：放弃 inline-block 实现多列布局的“技巧性妥协”，拥抱 Flexbox —— 它语义明确、代码简洁、行为可预测，是当前 Web 布局的事实标准。

终于介绍完啦！小伙伴们，这篇关于《Flexbox两区块并排显示方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！