弹性布局通过display:flex创建容器，子元素沿主轴排列，用flex-direction调整方向，justify-content和align-items控制对齐，flex属性调节伸缩，实现响应式界面。
在CSS项目中，弹性布局（Flexbox）是构建现代响应式界面的核心技术之一。它让容器内的子元素能够自动调整尺寸、对齐方式和排列顺序，适应不同屏幕尺寸和内容变化。掌握基础的弹性布局方法，能大幅提升开发效率和页面适配能力。
设置弹性容器
要启用弹性布局，首先需要定义一个弹性容器。通过给父元素设置
display: flex
或
display: inline-flex
，其所有直接子元素将自动成为弹性项目。
常见写法：
-
display: flex;
—— 创建块级弹性容器
-
display: inline-flex;
—— 创建行内弹性容器
一旦设为弹性容器，子元素将默认沿主轴方向（水平从左到右）排列，不再独占一行。
控制主轴与交叉轴方向
使用
flex-direction
属性可以改变主轴的方向，从而决定项目的排列方式。
立即学习“前端免费学习笔记（深入）”；
常用取值：
-
row
—— 水平从左到右（默认）
-
row-reverse
—— 水平从右到左
-
column
—— 垂直从上到下
-
column-reverse
—— 垂直从下到上
主轴方向确定后，交叉轴自动垂直于主轴，用于控制项目在另一维度上的对齐。
对齐弹性项目
利用对齐属性可以精确控制项目在主轴和交叉轴上的位置。
主轴对齐（水平方向）：
-
justify-content: flex-start;
—— 项目靠起点对齐
-
justify-content: center;
—— 居中对齐
-
justify-content: space-between;
—— 两端对齐，项目间间距相等
-
justify-content: space-around;
—— 项目周围留有等距空间
交叉轴对齐（垂直方向）：
-
align-items: flex-start;
—— 顶部对齐
-
align-items: center;
—— 垂直居中
-
align-items: stretch;
—— 拉伸填满容器（默认）
如果希望多行项目之间也分布均匀，可使用
align-content
，但前提是容器设置了换行
flex-wrap: wrap
。
弹性项目自身行为控制
每个子元素可以通过以下属性进一步控制其伸缩行为：
-
flex-grow
—— 定义项目的放大比例（0 不放大）
-
flex-shrink
—— 定义项目的缩小比例（1 可缩小）
-
flex-basis
—— 设置项目在分配多余空间前的初始大小
简写形式：
通常使用
flex
属性合并三个值，例如：
-
flex: 1;
—— 等价于
flex: 1 1 0
，可伸可缩
-
flex: 0 0 200px;
—— 固定宽度不伸缩
基本上就这些。合理运用这些基础方法，就能快速搭建导航栏、卡片布局、居中弹窗等常见结构，无需依赖浮动或定位。关键是理解主轴与交叉轴的关系，并熟练使用对齐和伸缩属性。不复杂但容易忽略细节。