在 Web 前端开发领域，CSS 布局一直是开发者们必须面对的难题之一。早期的 CSS 布局方式，如浮动布局和定位布局，虽然能够实现一定的布局效果，但是随着 Web 应用的复杂化，这些传统的布局方式已经无法满足现代 Web 应用的需要。
而在过去，我们使用 display:table 布局是一种非常流行的解决方案，它可以让我们像使用表格一样来布局我们的页面，而且兼容性也非常好。但是，随着 CSS Flexbox 的出现，display:table 布局已经逐渐退出了我们的视野。
那么，CSS Flexbox 到底是什么呢？它和 display:table 布局有什么区别和优劣呢？本篇文章将为大家深入探讨这些问题。
CSS Flexbox 是什么？
CSS Flexbox 是一种新的布局模式，它可以让我们更加轻松地实现复杂的布局效果。Flexbox 可以将容器中的元素按照一定的规则进行排列，同时也可以控制元素在容器中的对齐方式、换行方式等等。
Flexbox 的工作原理是将容器分为主轴和交叉轴两个方向，然后根据我们的设定，将元素沿着主轴或交叉轴进行排列。主轴和交叉轴的方向可以通过 flex-direction 属性来指定，而元素的对齐方式则可以通过 justify-content 和 align-items 属性来控制。
CSS Flexbox 和 display:table 布局的区别和优劣
相比于 display:table 布局，CSS Flexbox 具有以下优点：
更加灵活：CSS Flexbox 可以让我们更加灵活地控制元素的排列方式，而不需要像
display:table布局一样受到表格布局的限制。更加简单：CSS Flexbox 的语法相对于
display:table布局来说更加简单易懂，而且可以通过一些简单的属性设置来实现一些复杂的布局效果。更加适合响应式布局：由于 CSS Flexbox 可以自适应容器大小，因此在响应式布局中使用它可以更加方便和自然。
当然，CSS Flexbox 也存在一些缺点：
兼容性问题：虽然 CSS Flexbox 已经得到了广泛的支持，但是在一些老旧的浏览器中，它可能会存在兼容性问题。
学习成本高：相比于传统的布局方式，CSS Flexbox 的学习成本可能会稍微高一些。
不适合所有场景：CSS Flexbox 是一种相对新的布局方式，它并不适合所有的布局场景，有些场景可能还是需要使用传统的布局方式。
CSS Flexbox 的使用示例
下面是一个简单的 CSS Flexbox 布局示例，我们可以通过它来了解 Flexbox 的基本使用方法。
HTML 代码：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
CSS 代码：
// javascriptcn.com 代码示例
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background-color: #ccc;
}在这个示例中，我们通过 display: flex 属性将容器设置为 Flexbox 布局，然后通过 flex-direction 属性将主轴方向设置为水平方向，通过 justify-content 属性将元素的对齐方式设置为两端对齐，通过 align-items 属性将元素在交叉轴方向上的对齐方式设置为居中对齐。
最后，我们通过设置 .item 类的宽度和高度，以及背景颜色来让每个元素显示出来。
总结
CSS Flexbox 是一种非常强大和灵活的布局方式，它可以让我们更加轻松地实现复杂的布局效果，并且适合响应式布局。相比于传统的布局方式，CSS Flexbox 的语法更加简单易懂，但是也存在一些兼容性问题和学习成本高的缺点。在实际开发中，我们需要根据具体的布局需求来选择最合适的布局方式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b6e447d4982a6eb5c5e53