大家好，我是前端架构师，关注微信公众号【程序员大卫】免费领取前端精品资料。
背景
在早期，我们主要依靠传统 CSS 技巧（比如使用 float 或者 vertical-align）来实现网页布局，那时的做法显得又麻烦又不直观。到了 2025 年，Flex 布局已经在 PC 和移动端得到了广泛支持，极大地简化了布局开发。
提示： 虽然 Grid 布局在 PC 端的兼容性非常好，但在移动端还有待完善。关于 Grid 的更多内容，我们会在后续文章中详细介绍。
1. 元素垂直居中对齐
旧方法：
以前，我们常用 vertical-align: middle; 来实现内联元素的垂直居中，但这种方法要求元素必须是 inline-block 或 inline，并且需要额外调整。
<style>
img {
border: 1px solid red;
}
img,
.text {
display: inline-block;
vertical-align: middle;
}
</style>
<div class="box">
<img src="./images/logo.svg" />
<div class="text">Hello</div>
</div>
Flex 方法：
现在只需简单设置父元素为 Flex 布局，并使用 align-items: center; 即可轻松实现垂直居中。
<style>
.box {
display: flex;
align-items: center;
}
</style>
2. 元素两端对齐
旧方法：
过去常使用 float 实现左右两端对齐，代码略显冗长，并且有时需要处理浮动带来的问题（如父容器高度塌陷）。
<style>
.box {
border: 1px solid red;
overflow: hidden;
}
img {
float: left;
}
.text {
float: right;
}
</style>
Flex 方法：
利用 Flex 布局，只需一行代码 justify-content: space-between; 就能轻松实现两端对齐。如果还需要垂直居中，只需额外添加 align-items: center;。
.box {
border: 1px solid red;
display: flex;
justify-content: space-between;
align-items: center;
}
3. 纵向排列的元素水平居中
旧方法：
如果页面内容垂直排列（例如：图片下方的文本），需要分别对图片和文本单独设置居中样式。
<style>
.box {
border: 1px solid red;
}
img {
display: block;
margin: 0 auto;
}
.text {
text-align: center;
}
</style>
<div class="box">
<img src="./images/logo.svg" />
<div class="text">Hello</div>
</div>
Flex 方法：
将容器设置为 Flex 布局，并将主轴方向设为垂直（flex-direction: column;），再使用 align-items: center; 即可实现所有子元素水平居中。
.box {
display: flex;
flex-direction: column;
align-items: center;
}
4. 等分容器空间
旧方法：
通常需要借助 JavaScript 动态计算容器内子元素的宽度，比较繁琐。
const items = document.querySelectorAll('.item');
const containerWidth = document.querySelector('.box').offsetWidth;
items.forEach(item => {
item.style.width = (containerWidth / items.length) + 'px';
});
Flex 方法：
只需为子元素设置 flex: 1;，它们会自动平分父容器的可用空间。
<style>
.box {
display: flex;
}
.item {
flex: 1;
border: 1px solid red;
}
</style>
<div class="box">
<div class="item">item-1</div>
<div class="item">item-2</div>
<div class="item">item-3</div>
</div>
5. 圣杯布局（三栏自适应）
场景：常见的三栏布局——左右两侧固定宽度，中间区域自适应。
利用 Flex 布局，这种布局实现起来也十分简单：
<style>
.container {
display: flex;
height: 100%;
}
.left,
.right {
flex: 0 0 200px; /* 固定宽度 */
}
.left {
background: red;
}
.right {
background: yellow;
}
.center {
flex: 1; /* 自适应宽度 */
background: blue;
}
</style>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
总结
通过以上示例，你可以看到 Flex 布局如何大幅简化 CSS 布局的书写，让开发者专注于业务逻辑而不是处理繁琐的布局计算。无论是元素对齐、居中还是复杂的三栏布局，Flex 都能为你提供优雅的解决方案。
最后
点赞👍 + 关注➕ + 收藏❤️ = 学会了🎉。
更多优质内容关注公众号，@前端大卫。
