CSS Flexbox 布局是一种新型的布局方式，它可以使我们更加方便地实现响应式布局。与传统布局相比，CSS Flexbox 布局有哪些不同之处呢？本文将详细阐述它们的区别。
传统布局
传统布局的实现方式主要是通过浮动和定位来实现。例如，我们想要实现一个两栏布局，左边固定宽度，右边自适应宽度，可以这样做：
-- -------------------- ---- -------
--------- -----
------
------
-------
----- -
------ ------
------ -----
----------------- --------
-
------ -
------------ ------
----------------- --------
-
--------
-------
------
---- -------------
----
------
---- --------------
----
------
-------
-------这段代码中，我们使用了 .left 和 .right 两个 div 元素来分别表示左栏和右栏。我们在样式中给 .left 添加了宽度和浮动，使它占据了页面的左侧，而 .right 则没有设置宽度，但是通过设置 margin-left 让它从左侧 .left 元素的右侧开始显示。
这种方式的问题在于它的体验非常差。我们需要手动设置元素的宽度和高度，如果页面发生了变化，我们就需要重新计算这些值，而且这种方式非常不直观。此外，它也无法轻松实现复杂的布局。
Flexbox 布局
CSS Flexbox 布局通过一个 flex 容器来包裹子元素，使它们可以更加方便地实现布局。我们可以使用 display: flex 属性来把一个元素变成 flex 容器。
对于上面的两栏布局，我们可以用 Flexbox 进行改写：
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
-------- -----
----------------- --------
-
----- -
------ ------
----------------- --------
-
------ -
----- --
----------------- --------
-
--------
-------
------
---- ------------------
---- -------------
----
------
---- --------------
----
------
------
-------
-------这段代码中，我们使用了一个 .container div 元素来包裹所有的子元素。我们给 .container 添加了 display: flex 属性，将其转换成 flex 容器。对于 .left 和 .right 两个子元素，我们可以使用 flex: 1 和固定宽度来实现两栏布局。
通过 Flexbox，我们可以编写更加简洁和直观的代码，而且可以更加轻松地实现复杂的布局。此外，Flexbox 布局也更好的支持响应式设计。
总结
通过对比传统布局与 Flexbox 布局，我们可以发现 Flexbox 布局具有更好的可读性和可维护性，它也更加灵活，可以轻松实现复杂的布局。如果你想要使用 Flexbox 布局，可以查看 CSS Flexbox 布局教程，它将让你更好地掌握这个新型的布局方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648418b448841e9894345aff