Flexbox 布局中实现两个盒子分别占据父容器的 50% 宽度

在前端开发中，经常需要实现让两个盒子分别占据父容器的 50% 宽度的布局。在过去，我们可能需要使用 float、position 或者 table 等方式来实现这种布局效果。然而，随着 Flexbox 布局的出现，实现这种布局变得更加简单和灵活。

什么是 Flexbox 布局？

Flexbox 布局是 CSS3 中的一种新的布局模式，它提供了一种更加灵活的方式来布局和对齐元素。使用 Flexbox 布局，我们可以轻松地实现弹性布局、自适应布局等效果，从而更好地适应不同屏幕尺寸和设备。

如何实现两个盒子分别占据父容器的 50% 宽度？

在 Flexbox 布局中，我们可以使用 flex 属性来控制元素的布局。具体来说，我们可以使用 flex: 1 来让元素占据父容器的剩余空间，使用 flex: 0 来让元素根据自身内容来确定宽度。结合这些属性，我们可以实现两个盒子分别占据父容器的 50% 宽度的布局效果。

具体来说，我们可以通过以下步骤来实现这种布局效果：

1. 设置父容器的 display 属性为 flex，将子元素变成 Flexbox 容器。
2. 设置父容器的 justify-content 属性为 space-between，将子元素分布到容器的两侧。
3. 设置子元素的 flex-basis 属性为 50%，让它们占据父容器的 50% 宽度。

下面是示例代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

.box {
  flex-basis: 50%;
}

总结

Flexbox 布局是一种强大而灵活的布局模式，可以帮助我们更好地控制元素的布局和对齐。通过使用 flex 属性和一些简单的布局技巧，我们可以轻松地实现让两个盒子分别占据父容器的 50% 宽度的布局效果。在实际开发中，我们可以充分利用 Flexbox 布局来提高布局效率和开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65deba8c1886fbafa4bfcfa9