CSS3 现代布局全攻略：Flexbox 终极指南
在网页开发中，布局始终是最基础也是最关键的环节。随着 CSS3 的普及，Flexbox（弹性盒）布局系统彻底改变了我们构建网页的方式。本文将深入解析这种现代布局方案，帮助你轻松应对各种布局需求。
一、传统布局的局限性
在 CSS3 之前，我们主要依赖以下方式实现布局：
- 浮动 (float)：主要用于文字环绕，后被滥用于整体布局
- 定位 (position)：精确控制元素位置但缺乏灵活性
- 表格布局 (display: table)：语义不当且难以维护
这些方法不仅代码复杂，而且难以实现响应式设计，维护成本极高。
二、Flexbox：一维布局的终极方案
Flexbox 专为解决单行或单列布局而设计，特别适合导航栏、卡片列表等场景。
1. 基本概念
默认情况下，弹性项目沿着主轴依次排列，侧轴拉伸
css
.container {
display: flex; /* 创建弹性容器 */
}
2. 主轴方向控制
通过 flex-direction 改变主轴方向：
row | row-reverse | column | column-reverse
3. 主轴空间分配
justify-content 控制主轴上的对齐方式：
flex-start | flex-end | center | space-between | space-around | space-evenly
4. 侧轴对齐方式
align-items 控制侧轴上的对齐：
stretch | flex-start | flex-end | center | baseline
5. 弹性项目伸缩
所谓伸缩，是指在主轴方向上，当弹性容器有额外空间时，是否需要拉伸，当空间不足时，是否需要压缩。 在弹性项目上使用flex属性，可设置拉伸和压缩比例：flex: 拉伸比例 压缩比例 初始尺寸。
默认情况下，flex: 0 1 auto
flex 属性是以下三个属性的简写：
flex-grow：拉伸比例flex-shrink：压缩比例flex-basis：初始尺寸
6. 主轴换行
默认情况，当主轴剩余空间不足时，按照压缩比例进行压缩，但如果设置了主轴换行，则不会压缩，直接换行显示 给弹性容器设置flex-wrap: wrap，即可主轴换行。
三、学习资源推荐
结语
掌握 Flexbox是现代前端开发者的必备技能。它们不仅让布局代码更简洁高效，还能轻松实现过去需要复杂技巧才能完成的效果。