前端-弹性布局

弹性布局（Flexbox）是CSS3中用于实现高效页面布局的模块化方案，通过弹性容器（Flex Container）

和弹性项目（Flex Item）的交互，实现灵活的空间分配与对齐控制。其核心特性如下：

‌一、基础概念‌ 

1. ‌弹性容器‌
   通过 display: flex 或 display: inline-flex 声明，内部子元素自动成为弹性项目。

2. ‌主轴（Main Axis）与交叉轴（Cross Axis）‌

• ‌主轴‌：项目排列方向（默认为水平方向）。

• ‌交叉轴‌：垂直于主轴的方向（默认为垂直方向）

‌二、核心容器属性‌ 

三、项目属性‌ 

1. ‌尺寸控制‌

• flex-grow：定义项目放大比例（剩余空间分配）

• flex-shrink：定义项目收缩比例（空间不足时压缩）

• flex-basis：设置项目初始尺寸（默认 auto）

• 简写：flex: <grow> <shrink> <basis>（如 flex: 1 0 200px）

2. ‌对齐覆盖‌

• align-self：覆盖容器的 align-items，单独设置单个项目的交叉轴对齐方式（如 flex-end）

‌四、应用场景与优势‌ 

1. ‌响应式布局‌
   结合媒体查询（Media Queries），实现不同屏幕尺寸下的自适应排列（如移动端纵向排列、PC端横向排列）

2. ‌居中简化‌
   一行代码实现水平和垂直居中：

.container {  display: flex;  justify-content: center; /* 主轴居中 */  align-items: center;     /* 交叉轴居中 */}

1. ‌空间动态分配‌
   项目自动填充剩余空间（如侧边栏固定、主内容自适应）

2. ‌解决浮动/定位缺陷‌
   避免传统布局中 float 导致的塌陷问题，简化复杂布局实现 

💡 ‌最佳实践‌：优先使用弹性布局替代浮动或绝对定位，尤其在移动端导航栏、卡片列表、表单控件等场景中