为什么两个子盒无法横向排列？
以下 html 和 css 代码中，两个子盒子 box1 和 box2 预期应该横向排列，但实际却没有：
* {
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% 宽度的子盒子无法在父容器中横向排列。
要解决这个问题，可以将父元素的 display 属性修改为 flex，然后将子盒子的 display 属性修改为 block 或 flex。这样，子盒子将作为块级元素或弹性盒模型元素进行排列，并且可以按照预期横向排列。
立即学习“前端免费学习笔记（深入）”；
