在前端开发中，经常需要实现让两个盒子分别占据父容器的 50% 宽度的布局。在过去，我们可能需要使用 float、position 或者 table 等方式来实现这种布局效果。然而，随着 Flexbox 布局的出现，实现这种布局变得更加简单和灵活。
什么是 Flexbox 布局？
Flexbox 布局是 CSS3 中的一种新的布局模式，它提供了一种更加灵活的方式来布局和对齐元素。使用 Flexbox 布局，我们可以轻松地实现弹性布局、自适应布局等效果，从而更好地适应不同屏幕尺寸和设备。
如何实现两个盒子分别占据父容器的 50% 宽度？
在 Flexbox 布局中，我们可以使用 flex 属性来控制元素的布局。具体来说，我们可以使用 flex: 1 来让元素占据父容器的剩余空间，使用 flex: 0 来让元素根据自身内容来确定宽度。结合这些属性，我们可以实现两个盒子分别占据父容器的 50% 宽度的布局效果。
具体来说，我们可以通过以下步骤来实现这种布局效果：
- 设置父容器的
display属性为flex，将子元素变成 Flexbox 容器。 - 设置父容器的
justify-content属性为space-between，将子元素分布到容器的两侧。 - 设置子元素的
flex-basis属性为50%，让它们占据父容器的 50% 宽度。
下面是示例代码：
---- ------------------ ---- ------------------ ---- ------------------ ------
---------- - -------- ----- ---------------- -------------- - ---- - ----------- ---- -
总结
Flexbox 布局是一种强大而灵活的布局模式，可以帮助我们更好地控制元素的布局和对齐。通过使用 flex 属性和一些简单的布局技巧，我们可以轻松地实现让两个盒子分别占据父容器的 50% 宽度的布局效果。在实际开发中，我们可以充分利用 Flexbox 布局来提高布局效率和开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65deba8c1886fbafa4bfcfa9