而 Flex 布局则是一种比较新的布局方式，在现代浏览器中得到了广泛的支持。Flex 布局采用了一些简单的属性，如 display: flex、flex-direction、flex-wrap、justify-content 和 align-items 等，就能够轻松实现各种布局效果。
下面是一个使用传统布局方式和使用 Flex 布局方式实现的相同布局效果的比较：
传统布局方式：
<div class="wrapper"> <div class="left">左侧栏</div> <div class="right">右侧内容</div> </div> <style> .wrapper { overflow: hidden; } .left { float: left; width: 200px; height: 300px; background-color: #f8f8f8; } .right { margin-left: 200px; height: 300px; background-color: #eee; } </style>
Flex 布局方式：
<div class="wrapper"> <div class="left">左侧栏</div> <div class="right">右侧内容</div> </div> <style> .wrapper { display: flex; } .left { width: 200px; height: 300px; background-color: #f8f8f8; } .right { flex: 1; height: 300px; background-color: #eee; } </style>
从上面的示例可以看出，使用 Flex 布局可以实现同样的布局效果，但是代码量更少，易于维护。
在实际开发中，我们可以根据具体的布局需求选择传统布局方式或者 Flex 布局方式，灵活运用各种布局方式，提高页面的效率和可维护性。
