CSS Flexbox布局完全指南
Flexbox（弹性盒模型）是CSS3中引入的一种强大的布局模式，它使得各种页面布局变得简单而灵活。无论是在实现居中对齐、等高列、还是复杂的导航布局，Flexbox都能提供优雅的解决方案。本文将从基础概念出发，逐步深入到高级用法，帮助你全面掌握Flexbox布局技术。
一、Flexbox基础概念
Flexbox的核心思想是让容器能够改变其子元素的宽度、高度和顺序，以最佳方式填充可用空间。一个Flex容器由主轴（main axis）和交叉轴（cross axis）构成，子元素沿着主轴排列。
要创建一个Flex容器，只需要将父元素的display属性设置为flex：
.container {
display: flex;
}这一行代码就会将所有直接子元素变成flex项目，默认情况下它们会沿着主轴（水平方向）从左到右排列。
二、容器属性详解
1. flex-direction（主轴方向）
flex-direction决定了主轴的方向，也就是子元素的排列方向：
.container {
flex-direction: row; /* 默认值，从左到右 */
flex-direction: row-reverse; /* 从右到左 */
flex-direction: column; /* 从上到下 */
flex-direction: column-reverse; /* 从下到上 */
}在实际开发中，column值在实现纵向布局时特别有用，比如移动端的单列布局。
2. flex-wrap（换行控制）
默认情况下，flex项目不会换行，即使空间不足也会被压缩。使用flex-wrap可以改变这一行为：
.container {
flex-wrap: nowrap; /* 默认，不换行 */
flex-wrap: wrap; /* 自动换行 */
flex-wrap: wrap-reverse; /* 反向换行 */
}3. justify-content（主轴对齐）
这是最常用的Flexbox属性之一，它控制子元素在主轴上的对齐方式：
.container {
justify-content: flex-start; /* 起始对齐 */
justify-content: flex-end; /* 末尾对齐 */
justify-content: center; /* 居中对齐 */
justify-content: space-between; /* 两端对齐，项目间等距 */
justify-content: space-around; /* 项目两侧等距 */
justify-content: space-evenly; /* 完全等距 */
}其中space-between和center是最常用的两个值。space-between特别适合实现导航栏的两端对齐效果，而center则是实现水平居中的最简方式。
4. align-items（交叉轴对齐）
align-items控制子元素在交叉轴上的对齐方式：
.container {
align-items: stretch; /* 默认，拉伸填满 */
align-items: flex-start; /* 起始对齐 */
align-items: flex-end; /* 末尾对齐 */
align-items: center; /* 居中对齐 */
align-items: baseline; /* 基线对齐 */
}当align-items设置为center，且flex-direction为row时，可以实现完美的垂直居中效果。
三、项目属性详解
1. flex-grow（放大比例）
flex-grow定义了项目的放大比例，默认为0（不放大）。如果所有项目都设置为1，则它们等分剩余空间：
.item {
flex-grow: 1; /* 等分剩余空间 */
}
.sidebar {
flex-grow: 0; /* 不参与分配 */
width: 250px; /* 固定宽度 */
}
.main {
flex-grow: 2; /* 占据两倍剩余空间 */
}2. flex-shrink（缩小比例）
flex-shrink定义了项目的缩小比例，默认为1。如果空间不足，项目将按照这个比例缩小。设置为0则不缩小。
3. flex-basis（初始大小）
flex-basis定义了在分配多余空间之前，项目占据的主轴空间。它可以设置为具体的长度值或者auto。
4. flex简写属性
flex属性是flex-grow、flex-shrink和flex-basis的简写：
.item {
flex: 1; /* 等同于 flex: 1 1 0% */
flex: auto; /* 等同于 flex: 1 1 auto */
flex: none; /* 等同于 flex: 0 0 auto */
flex: 0 0 200px; /* 固定200px，不放大不缩小 */
}四、常见布局实战
1. 经典圣杯布局
.layout {
display: flex;
min-height: 100vh;
}
.sidebar-left {
flex: 0 0 200px;
}
.main-content {
flex: 1;
}
.sidebar-right {
flex: 0 0 150px;
}2. 完美居中
.center-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}3. 等高卡片布局
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px; /* 最小300px，自动填充 */
}五、浏览器兼容性与注意事项
Flexbox在现代浏览器中得到了广泛支持。以下是一些需要注意的事项：
- IE11对Flexbox的支持有一些已知bug，建议使用autoprefixer处理兼容性
- flex简写比单独写三个属性更推荐使用
- 注意min-width的默认值可能导致意外的布局问题
- 在嵌套Flex容器时，注意flex-shrink的累积效果
Flexbox是现代CSS布局的基石，掌握它能让你在面对各种布局需求时游刃有余。结合CSS Grid使用，可以覆盖几乎所有常见的布局场景。建议在实际项目中多加练习，逐步体会Flexbox的强大之处。
