传统的网页布局依赖浮动float和定位position，写起来代码冗长，垂直居中、等高排列这类需求往往需要各种hack手段才能实现。CSS3推出的flex弹性盒子模型改变了这一局面，它提供了一套声明式的布局语法，让容器内的子元素能够自动分配空间、灵活伸缩，天然适合构建自适应网页。本文将系统讲解flex的核心属性，并通过完整实例演示如何用它实现常见的自适应布局。
一、理解flex布局的两级结构：容器与项目
flex布局的核心思想是把布局问题拆分为两个层级：外层的flex容器和内层的flex项目。只需要在父元素上声明display: flex，该元素就变成了flex容器，它的所有直接子元素自动成为flex项目，原本的块级、行内特性会被flex布局逻辑覆盖。
容器级别的属性负责控制整体排列方向与对齐方式，主要包括以下几个：
flex-direction：决定主轴方向，常用值有row（水平排列）、column（垂直排列）以及对应的reverse反向值。flex-wrap：控制是否换行，默认nowrap不换行，设置为wrap后当空间不足时项目会自动换到下一行。justify-content：定义项目在主轴上的对齐方式，如flex-start、center、space-between、space-around。align-items：定义项目在交叉轴上的对齐方式，常用center实现垂直居中。
项目级别的属性则控制单个元素的伸缩能力，其中最重要的是flex-grow（放大比例）、flex-shrink（缩小比例）和flex-basis（初始尺寸），三者可以用简写形式flex: 1 1 auto表达。下面是一个最基础的容器声明示例：
.container {
display: flex; /* 声明为弹性容器 */
flex-direction: row; /* 主轴为水平方向 */
justify-content: space-between; /* 两端对齐 */
align-items: center; /* 交叉轴居中，实现垂直居中 */
flex-wrap: wrap; /* 空间不足时自动换行 */
}理解了两级结构的分工，就掌握了flex布局的主线：容器管方向和对齐，项目管伸缩和占比，两者配合即可覆盖绝大多数布局场景。
二、用flex-grow与flex-basis实现自适应等分与比例分配
自适应布局最常见的需求是让子元素按比例瓜分剩余空间，这正是flex-grow的用武之地。当容器存在剩余空间时，浏览器会按照各项目的grow值比例进行分配。例如三个项目都设置flex: 1，它们就会三等分；设置flex: 2和flex: 1的两个项目，则按2:1的比例分配空间。
需要注意的是，flex: 1实际上是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的简写。把flex-basis设为0意味着不考虑项目自身宽度，完全按比例分配，这是实现严格等分布局的关键。如果希望项目先保留内容宽度、再把剩余空间分配掉，可以改用flex: auto，它的flex-basis为auto，行为会明显不同。
<style>
.nav {
display: flex;
}
.nav .item {
flex: 1; /* 每个导航项等分宽度 */
text-align: center;
padding: 12px 0;
background: #f5f5f5;
}
.sidebar {
flex: 0 0 240px; /* 侧边栏固定240px不伸缩 */
}
.main {
flex: 1; /* 主内容区占据剩余全部空间 */
min-width: 0; /* 防止内容撑破容器 */
}
</style>
<div class="nav">
<div class="item">首页</div>
<div class="item">产品</div>
<div class="item">关于我们</div>
</div>上面的例子展示了两种典型用法：等分导航和经典的侧边栏固定加主区域自适应。其中flex: 0 0 240px表示不放大、不缩小、基准宽度240像素，这正是固定列的标准写法。而min-width: 0是一个高频踩坑点，flex项目默认min-width: auto，内部的长文本或表格可能把布局撑开，设置为零后才能让内容正常收缩。
三、结合媒体查询与flex-wrap打造完整响应式页面
flex本身解决的是元素如何分配空间，而不同屏幕尺寸下整体结构的切换，则需要配合媒体查询media query来完成。一个典型的响应式卡片列表思路是：大屏下一行四列，平板一行两列，手机一行一列。借助flex-wrap让项目自动换行，再通过媒体查询调整每个项目的基准宽度，即可用极少的代码实现。
.card-list {
display: flex;
flex-wrap: wrap; /* 允许换行 */
gap: 16px; /* 项目之间的间距 */
}
.card {
flex: 0 0 calc(25% - 12px); /* 默认四列，扣除间距 */
box-sizing: border-box;
}
@media (max-width: 992px) {
.card {
flex-basis: calc(50% - 8px); /* 中屏两列 */
}
}
@media (max-width: 576px) {
.card {
flex-basis: 100%; /* 小屏单列 */
}
}这段代码的关键点有三个：一是用calc()函数在百分比宽度中扣除gap产生的间隙，保证一行正好放下指定列数；二是用box-sizing: border-box让padding计算在宽度内部，避免溢出；三是媒体查询只修改flex-basis，其他布局规则完全复用，维护成本极低。
另一个经典场景是移动端常见的导航栏变形：宽屏时横向排列，窄屏时改为纵向堆叠。只需要在媒体查询中把flex-direction从row改为column即可，无需改动任何HTML结构。这种结构与样式分离的灵活性正是flex相比浮动布局最大的优势。
四、常见问题与兼容性注意事项
使用flex布局时，有几个高频问题值得提前了解。首先是垂直居中，以前需要绝对定位加负边距的写法，现在只需容器上display: flex; align-items: center; justify-content: center;两三行即可完成，这也是flex最实用的能力之一。其次要注意，float、clear和vertical-align属性在flex项目上会完全失效，不要混用旧布局思路。
其次是绝对定位子元素的问题。设置了position: absolute的子元素不参与flex布局，但它会以最近的定位过的祖先元素为参照，如果希望它相对某个flex项目定位，记得给该项目加position: relative。
最后是兼容性。目前主流浏览器的最新版本对flex支持已经非常完善，只需要注意一些老旧的移动端浏览器（如某些低版本安卓WebView）对flex-wrap的支持存在缺陷。如果项目需要兼容这类环境，建议针对换行场景提供降级方案，或使用Autoprefixer等工具自动补全-webkit-前缀。通过合理的渐进增强策略，flex布局完全可以放心地作为现代网页布局的首选方案，配合grid布局使用则能覆盖几乎所有的页面结构需求。