使用CSS Flexbox实现弹性布局需先设置容器为flex，再通过flex-direction、flex-wrap、justify-content、align-items和flex等属性控制子元素排列与对齐。1. 设display:flex启用布局；2. 用flex-direction定义主轴方向；3. flex-wrap控制是否换行；4. justify-content和align-items设置主轴与交叉轴对齐方式；5. 子项用flex属性定义伸缩性；6. 实战中如居中卡片布局可结合gap与flex:0 1 200px实现响应式分布。
使用 CSS Flexbox 实现弹性布局，关键是将容器设置为 flex 容器，然后通过一系列属性控制子元素（项目）的排列方式、对齐和伸缩行为。下面分步骤说明如何使用 Flexbox 快速构建灵活的布局。
1. 设置 flex 容器
要启用 Flexbox 布局，先给父元素设置 display: flex 或 display: inline-flex。
display: flex; 使容器成为块级弹性容器，其所有直接子元素自动成为 flex 项目。示例：
.container {
display: flex;
}
2. 控制主轴方向（flex-direction）
flex-direction 决定项目在容器中的排列方向。
立即学习“前端免费学习笔记（深入）”；
- flex-direction: row; — 水平从左到右（默认）
- flex-direction: row-reverse; — 水平从右到左
- flex-direction: column; — 垂直从上到下
- flex-direction: column-reverse; — 垂直从下到上
示例：垂直排列项目
.container {
display: flex;
flex-direction: column;
}
3. 设置换行（flex-wrap）
默认情况下，项目会挤在一行。如果内容超出容器，可以允许换行。
- flex-wrap: nowrap; — 不换行（默认）
- flex-wrap: wrap; — 换行，第一行在上方
- flex-wrap: wrap-reverse; — 换行，第一行在下方
也可以用简写属性 flex-flow 同时设置 flex-direction 和 flex-wrap。
.container {
display: flex;
flex-flow: row wrap;
}
4. 对齐方式（justify-content 和 align-items）
这两个属性控制项目在主轴和交叉轴上的对齐方式。
justify-content（主轴对齐）：
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
- flex-start — 靠左/上对齐
- flex-end — 靠右/下对齐
- center — 居中
- space-between — 两端对齐，项目间间距相等
- space-around — 项目周围留有等量空间
- space-evenly — 项目之间和边缘的间距完全相等
align-items（交叉轴对齐）：
- flex-start — 顶部对齐
- flex-end — 底部对齐
- center — 居中对齐
- baseline — 文本基线对齐
- stretch — 拉伸填满容器（默认）
示例：水平居中 + 垂直居中
.container {
display: flex;
justify-content: center;
align-items: center;
}
5. 控制单个项目的伸缩性（flex 属性）
每个子项目可以设置 flex 属性来控制其增长、收缩和基础大小。
常用简写：flex: 1 表示该项目占据剩余空间；flex: 2 占据两倍空间。
示例：三栏布局，中间自适应
.left, .right {
flex: 0 0 200px; /* 不伸缩，固定宽 200px */
}
.middle {
flex: 1; /* 占据剩余空间 */
}
HTML 结构：
左侧中间右侧
6. 简单实战：居中卡片布局
让多个卡片在页面中均匀分布并居中对齐。
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px; /* 项目之间的间距 */
padding: 20px;
}
.card {
flex: 0 1 200px; / 最小 200px，可增长但不压缩过度 /
background: #f0f0f0;
padding: 20px;
border-radius: 8px;
text-align: center;
}
基本上就这些。掌握这几个核心属性，就能应对大多数常见布局需求。Flexbox 的优势在于简洁、响应式强，适合一维布局场景。
