为什么两个子盒无法横向排列？

以下 html 和 css 代码中，两个子盒子 box1 和 box2 预期应该横向排列，但实际却没有：

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

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

.container {
  height: 300px;
  width: 500px;
}

.box1 {
  display: inline-flex;
  width: 50%;
  height: 100%;
  background-color: #87CEFA;
}

.box2 {
  display: inline-flex;
  height: 100%;
  width: 50%;
  background-color: #FFC0CB;
}

这是因为给子盒子设置了 inline-flex 的 display 属性。inline-flex 属性使得子盒子作为行内元素在父容器中排列，而行内元素之间默认会有 1em/4 的间隙。因此，两个 50% 宽度的子盒子无法在父容器中横向排列。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

要解决这个问题，可以将父元素的 display 属性修改为 flex，然后将子盒子的 display 属性修改为 block 或 flex。这样，子盒子将作为块级元素或弹性盒模型元素进行排列，并且可以按照预期横向排列。

立即学习“前端免费学习笔记（深入）”；