flex布局是CSS3提出的弹性盒模型，通过设置容器的display属性为flex，可以让其内部子元素按照一定规则自动排列和对齐，解决传统浮动布局带来的清除浮动、垂直居中等麻烦问题。
flex布局的基本概念
使用flex布局时，外层元素称为flex容器，内部直接子元素称为flex项目。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。项目默认沿主轴排列。
如何开启flex布局
只需在父元素上声明以下样式：
.container {
display: flex; /* 开启弹性布局 */
}
容器常用属性
容器上有几个核心属性控制整体排列行为：
- flex-direction：决定主轴方向，如row、column
- justify-content：控制项目在主轴上的对齐方式
- align-items：控制项目在交叉轴上的对齐方式
- flex-wrap：控制项目是否换行
示例：水平居中导航
.nav {
display: flex;
justify-content: center; /* 主轴居中 */
align-items: center; /* 交叉轴居中 */
height: 60px;
}
项目常用属性
项目自身也可以通过属性调整伸缩行为：
| 属性 | 作用 |
|---|---|
| flex-grow | 放大比例，占剩余空间 |
| flex-shrink | 缩小比例 |
| flex-basis | 项目主轴基准大小 |
示例：两侧固定中间自适应
<div class="wrap"> <div class="left">左侧</div> <div class="center">中间内容</div> <div class="right">右侧</div> </div>
.wrap { display: flex; }
.left, .right { width: 200px; }
.center { flex: 1; /* 占据剩余空间 */ }
常见误区提醒
注意，flex属性只作用于直接子元素，若子元素内部还需弹性排列，要再次声明display: flex。另外，在CSS中写到的<input>等标签名称若在文中提及需转义，但函数调用如flex()仅是方法名。
flex布局让网页结构更清晰，搭配媒体查询可轻松实现响应式设计。
小结
通过flex进行网页布局，核心是先定义容器再调整项目。掌握direction、justify-content与flex-grow等属性后，就能高效完成绝大多数排版需求。