什么是CSS Flexbox布局？
CSS Flexbox 布局全称为 CSS Flexible Box Layout Module，指的是一种基于 CSS3 的新布局方式，能够以弹性的方式对容器中的子元素进行排列和对齐，而不必考虑容器和子元素大小、数量等因素。
相比传统的布局方法，Flexbox 布局更加灵活、简便，能够快速实现各种复杂的布局效果。因此，它已经成为了目前前端开发中不可或缺的一部分。
如何实现两列布局？
在日常前端开发中，两列布局可能是最常见的一种布局方式。而在 Flexbox 布局中，实现两列布局也非常简单。我们只需要设置容器的属性 display: flex，然后将容器的子元素分别放置在两个 div 中，其中一个 div 的属性为 flex: 1，另一个 div 的属性为 flex: none 即可。
接下来，让我们看一下具体的示例代码：
<div class="container"> <div class="left">左栏内容</div> <div class="right">右栏内容</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ----- -- - ------ - ----- ----- ------ ------ -
在上述代码中，flex: 1 的作用是使左列可以自适应宽度，而 flex: none 则是指定右列宽度为固定值 300px。
总结
Flexbox 布局是一种简便、灵活的前端布局方式，能够方便地实现各种复杂的布局效果。在实现两列布局时，我们只需要设置容器属性为 display: flex，并为两列元素添加不同的 flex 属性即可快速实现。
希望本文对您理解 Flexbox 布局的实现方式有所帮助。如果您还想深入了解 Flexbox 布局的其他实现方式，可以参考相关的官方文档以及其他优秀的在线资料。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f959d980a9b385b8ff3de