使用display:flex可创建弹性容器，其子元素沿主轴排列，通过flex-direction控制方向，justify-content设置主轴对齐，align-items定义交叉轴对齐，实现响应式布局与居中等效果。
要使用 CSS 的 display: flex 创建弹性容器，只需要在父元素上设置 display: flex 或 display: inline-flex，即可让其子元素变成弹性项目，并沿主轴排列。这种方式非常适合构建响应式布局、居中对齐、等高列等常见页面结构。
1. 基本语法：创建弹性容器
将容器的 display 属性设为 flex，它就变成了一个弹性容器，其直接子元素自动成为弹性项目。
.container {
display: flex;
}
此时，所有子元素会默认排成一行（从左到右），并尽可能紧凑排列。
2. 控制主轴方向：flex-direction
通过 flex-direction 可以改变主轴方向，决定子元素的排列方式。
立即学习“前端免费学习笔记（深入）”；
Destoon B2B网站
下载
Destoon B2B网站管理系统是一套完善的B2B(电子商务)行业门户解决方案。系统基于PHP+MySQL开发，采用B/S架构，模板与程序分离，源码开放。模型化的开发思路，可扩展或删除任何功能；创新的缓存技术与数据库设计，可负载千万级别数据容量及访问。 系统特性1、跨平台。支持Linux/Unix/Windows服务器，支持Apache/IIS/Zeus等2、跨浏览器。基于最新Web标准构建，在
-
row：从左到右水平排列（默认） -
row-reverse：从右到左水平排列 -
column：从上到下垂直排列 -
column-reverse：从下到上垂直排列
.container {
display: flex;
flex-direction: row; /* 可替换为 column 等 */
}
3. 主轴对齐方式：justify-content
控制子元素在主轴上的对齐方式。
-
flex-start：靠起点对齐 -
flex-end：靠终点对齐 -
center：居中对齐 -
space-between：两端对齐，中间间距相等 -
space-around：每个项目两侧间距相等 -
space-evenly：项目之间和边缘的间距都相等
.container {
display: flex;
justify-content: center;
}
4. 交叉轴对齐方式：align-items
控制子元素在交叉轴（垂直于主轴）上的对齐方式。
-
stretch：拉伸填满容器（默认） -
flex-start：顶部对齐 -
flex-end：底部对齐 -
center：居中对齐 -
baseline：基线对齐
.container {
display: flex;
align-items: center;
}
基本上就这些核心设置。只要给父元素加上 display: flex，再配合几个常用属性，就能快速实现灵活的布局效果。不复杂但容易忽略细节，比如子元素必须是直接子元素才受弹性布局影响。
