前端-弹性布局
弹性布局（Flexbox）是CSS3中用于实现高效页面布局的模块化方案，通过弹性容器（Flex Container）
和弹性项目（Flex Item）的交互，实现灵活的空间分配与对齐控制。其核心特性如下：
一、基础概念
弹性容器
通过display: flex或display: inline-flex声明，内部子元素自动成为弹性项目。主轴（Main Axis）与交叉轴（Cross Axis）
主轴：项目排列方向（默认为水平方向）。
交叉轴：垂直于主轴的方向（默认为垂直方向）
二、核心容器属性
三、项目属性
尺寸控制
flex-grow：定义项目放大比例（剩余空间分配）flex-shrink：定义项目收缩比例（空间不足时压缩）flex-basis：设置项目初始尺寸（默认auto）简写：
flex: <grow> <shrink> <basis>（如flex: 1 0 200px）对齐覆盖
align-self：覆盖容器的align-items，单独设置单个项目的交叉轴对齐方式（如flex-end）
四、应用场景与优势
响应式布局
结合媒体查询（Media Queries），实现不同屏幕尺寸下的自适应排列（如移动端纵向排列、PC端横向排列）居中简化
一行代码实现水平和垂直居中：
.container {
display: flex;
justify-content: center; /* 主轴居中 */
align-items: center; /* 交叉轴居中 */
}空间动态分配
项目自动填充剩余空间（如侧边栏固定、主内容自适应）解决浮动/定位缺陷
避免传统布局中float导致的塌陷问题，简化复杂布局实现
💡 最佳实践：优先使用弹性布局替代浮动或绝对定位，尤其在移动端导航栏、卡片列表、表单控件等场景中
