flexbox通过弹性容器和项目实现高效布局，设置display: flex定义容器，flex-direction确定主轴方向，justify-content控制主轴对齐，align-items处理交叉轴对齐，flex属性调节项目伸缩，适用于居中、等高列、导航栏等场景。
css Flexbox布局是一种用于页面布局的一维布局模型，它的目标是提供一种更有效的方式来对容器中的子元素进行排列、对齐和空间分配，尤其是在空间未知或动态变化的情况下。Flexbox并不是替代传统布局方式（如浮动或定位），而是为了解决这些方法在处理复杂对齐和自适应布局时的局限性。
Flexbox核心概念
Flexbox围绕“弹性容器”（flex container）和“弹性项目”（flex item）展开。一旦你给一个元素设置display: flex或display: inline-flex，该元素就成为弹性容器，其直接子元素自动成为弹性项目。
Flexbox是单向布局系统，它沿着一条轴线（主轴或交叉轴）来排列内容：
- 主轴（Main Axis）：弹性项目排列的方向。可以是水平方向（默认）或垂直方向。
- 交叉轴（Cross Axis）：垂直于主轴的方向。
- 主轴起点 / 主轴终点：主轴的开始与结束位置，受flex-direction影响。
- 交叉轴起点 / 交叉轴终点：交叉轴的开始与结束位置。
如何使用Flexbox
要使用Flexbox，先从设置容器开始，然后调整项目属性以达到理想的布局效果。
立即学习“前端免费学习笔记（深入）”；
1. 定义弹性容器
通过display: flex创建块级弹性容器：
.container {
display: flex;
}
或使用display: inline-flex创建行内弹性容器：
.container {
display: inline-flex;
}
2. 设置主轴方向
使用flex-direction定义主轴方向：
- row：从左到右（默认）
- row-reverse：从右到左
- column：从上到下
- column-reverse：从下到上
.container {
flex-direction: row;
}
3. 控制主轴上的对齐方式
使用justify-content控制项目在主轴上的对齐：
- flex-start：靠主轴起点对齐
- flex-end：靠主轴终点对齐
- center：居中对齐
- space-between：两端对齐，项目之间间距相等
- space-around：每个项目周围有相等的空间
- space-evenly：所有项目之间的间距完全相等
.container {
justify-content: center;
}
4. 控制交叉轴上的对齐方式
使用align-items控制项目在交叉轴上的对齐：
- stretch：拉伸填满容器（默认）
- flex-start：靠交叉轴起点对齐
- flex-end：靠交叉轴终点对齐
- center：居中对齐
- baseline：按基线对齐
.container {
align-items: center;
}
5. 弹性项目自身对齐（覆盖align-items）
使用align-self可以让某个项目单独设置对齐方式：
.item {
align-self: flex-end;
}
6. 设置项目的扩展与收缩行为
使用flex属性（简写）来控制项目如何占用剩余空间：
- flex: 1：项目将等比扩展以填充剩余空间
- flex: 0 1 auto：默认值，不扩展但可收缩
- flex: 2：该项目占两份空间（当其他为1时）
.item1 { flex: 1; }
.item2 { flex: 2; }
常见应用场景
Flexbox特别适合以下场景：
- 水平垂直居中一个元素（只需几行代码）
- 创建等高列布局
- 实现响应式导航栏
- 卡片组件内部元素的对齐
- 表单控件的对齐与分布
例如，让一个盒子内的内容水平垂直居中：
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
基本上就这些。Flexbox简化了以往需要复杂计算和hack的布局任务，掌握它的核心属性后，大多数界面布局都能快速实现。关键是理解主轴和交叉轴的关系，以及容器与项目各自的控制属性。不复杂但容易忽略细节。