在 Flexbox 出现之前，CSS 布局是一件令人头疼的事情。浮动（float）和定位（position）能实现布局，但语义不清晰、代码难维护。Flexbox 的出现彻底改变了前端布局的方式，让复杂的布局变得简单直观。
核心概念：两个轴
Flexbox 的一切围绕"两个轴"展开：
- 主轴（Main Axis）：默认水平方向，由
flex-direction决定 - 交叉轴（Cross Axis）：垂直于主轴的方向
理解这两个轴，就理解了 Flexbox 的 80%。
容器属性
在父元素上设置 display: flex，它就变成了 Flex 容器，子元素自动成为 Flex 项目。
.container {
display: flex;
/* 主轴方向 */
flex-direction: row; /* 默认：水平排列 */
flex-direction: column; /* 垂直排列 */
/* 主轴对齐 */
justify-content: flex-start; /* 左对齐（默认） */
justify-content: center; /* 居中 */
justify-content: space-between; /* 两端对齐 */
justify-content: space-around; /* 等间距 */
/* 交叉轴对齐 */
align-items: stretch; /* 拉伸填满（默认） */
align-items: center; /* 垂直居中 */
align-items: flex-start; /* 顶部对齐 */
/* 是否换行 */
flex-wrap: nowrap; /* 不换行（默认） */
flex-wrap: wrap; /* 换行 */
}
项目属性
子元素（Flex 项目）可以控制自己在主轴方向上的行为：
.item {
/* 放大比例：当容器有剩余空间时，如何分配 */
flex-grow: 0; /* 默认不放大 */
flex-grow: 1; /* 按比例放大 */
/* 缩小比例：当空间不足时，如何缩小 */
flex-shrink: 1; /* 默认按比例缩小 */
flex-shrink: 0; /* 不缩小 */
/* 初始大小 */
flex-basis: auto; /* 默认：内容大小 */
flex-basis: 200px; /* 固定初始宽度 */
/* 简写：grow shrink basis */
flex: 1; /* 等同于 flex: 1 1 0% */
flex: none; /* 等同于 flex: 0 0 auto */
/* 单独对齐（覆盖容器的 align-items） */
align-self: center;
}
实战：常见布局一行搞定
/* 水平垂直居中 */
.center-box {
display: flex;
justify-content: center;
align-items: center;
}
/* 导航栏：Logo 左，菜单右 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* 等宽三栏布局 */
.three-columns {
display: flex;
}
.three-columns > * {
flex: 1;
}
/* 底部固定，内容自适应 */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page .content { flex: 1; }
.page .footer { flex: none; }
常见问题与技巧
- 间隙问题：用
gap: 16px代替 margin，更简洁且不会产生多余的外边距 - 文本溢出：Flex 项目中的长文本可能导致容器被撑开，给文本元素加
min-width: 0或overflow: hidden - 等高卡片：Flex 容器中的子元素默认等高（
align-items: stretch），不需要额外 hack
小结
Flexbox 是一维布局的利器，掌握它可以解决日常 90% 的布局需求。核心就是理解两个轴 + 六个对齐属性。建议在实际项目中多用多练，形成肌肉记忆。当需要二维布局（同时控制行和列）时，再考虑 CSS Grid。