一、Flex布局的核心机制

Flex布局（弹性盒子模型）通过定义容器（flex container）和项目（flex item）的交互规则，实现响应式页面结构。其核心在于通过主轴（main axis）和交叉轴（cross axis）的双向控制，替代传统浮动或定位布局的局限性。

1.1 容器属性详解

display: flex/inline-flex

• display: flex：创建块级弹性容器，独占一行
• display: inline-flex：创建行内弹性容器，与其他元素共存

  .container {
  display: flex; /* 推荐主流场景使用 */
  /* display: inline-flex; 适用于导航栏等行内布局 */
  }

flex-direction

控制主轴方向，决定项目排列顺序：

• row（默认）：水平从左到右
• row-reverse：水平从右到左
• column：垂直从上到下
• column-reverse：垂直从下到上

  .container {
  flex-direction: column; /* 移动端常见纵向布局 */
  }

flex-wrap

处理项目溢出时的换行行为：

• nowrap（默认）：单行压缩/溢出
• wrap：多行正向换行
• wrap-reverse：多行反向换行

  .container {
  flex-wrap: wrap; /* 响应式网格布局必备 */
  }

flex-flow（简写属性）

组合flex-direction和flex-wrap：

.container {
  flex-flow: row wrap; /* 等效于同时设置两个属性 */
}

justify-content

主轴对齐方式，包含6种模式：

• flex-start：起始端对齐
• flex-end：末端对齐
• center：居中对齐
• space-between：两端对齐，间距均匀
• space-around：每个项目两侧间距相等
• space-evenly：所有间距完全相等

  .container {
  justify-content: space-between; /* 导航菜单常用 */
  }

align-items

交叉轴对齐方式，单行布局专用：

• stretch（默认）：拉伸填充容器
• flex-start：起始端对齐
• flex-end：末端对齐
• center：居中对齐
• baseline：基线对齐

  .container {
  align-items: center; /* 卡片标题垂直居中 */
  }

align-content

多行交叉轴对齐方式（需配合flex-wrap: wrap）：

• 模式与justify-content类似，但作用于交叉轴

  .container {
  align-content: space-around; /* 多行图片墙布局 */
  }

二、Flex项目属性详解

2.1 基础属性

order

控制项目排列顺序，数值越小越靠前：

.item {
  order: 1; /* 默认0，可设负值提前 */
}

flex-grow

分配剩余空间的比例，默认0（不扩展）：

.item {
  flex-grow: 1; /* 均分剩余空间 */
}
.item-main {
  flex-grow: 2; /* 占据2倍空间 */
}

flex-shrink

空间不足时的收缩比例，默认1：

.item {
  flex-shrink: 0; /* 禁止收缩 */
}

flex-basis

项目初始尺寸，优先于width/height：

.item {
  flex-basis: 200px; /* 固定基准值 */
  /* flex-basis: auto; 默认根据内容调整 */
}

flex（简写属性）

组合flex-grow、flex-shrink、flex-basis：

.item {
  flex: 1 0 200px; /* 推荐简写形式 */
  /* 等效于：
     flex-grow: 1;
     flex-shrink: 0;
     flex-basis: 200px;
  */
}

align-self

覆盖容器的align-items，实现单个项目对齐：

.item {
  align-self: flex-end; /* 单独底部对齐 */
}

三、实际应用场景解析

3.1 经典布局实现

等分列布局

.container {
  display: flex;
}
.item {
  flex: 1; /* 均分宽度 */
  min-width: 0; /* 修复内容溢出问题 */
}

圣杯布局（三栏等高）

<div class="container">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right">Right</div>
</div>

.container {
  display: flex;
  min-height: 300px;
}
.left, .right {
  flex: 0 0 200px;
  background: #eee;
}
.center {
  flex: 1;
  background: #ddd;
}

垂直居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

3.2 响应式适配技巧

移动端导航栏

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
  }
}

动态网格系统

.grid {
  display: flex;
  flex-wrap: wrap;
}
.grid-item {
  flex: 0 0 calc(33.333% - 20px);
  margin: 10px;
}
@media (max-width: 768px) {
  .grid-item {
    flex: 0 0 calc(50% - 20px);
  }
}

四、性能优化与兼容性

4.1 渲染性能建议

• 避免过度嵌套Flex容器（建议不超过3层）
• 对静态布局优先使用width/height而非flex-basis
• 使用will-change: transform优化动画性能

4.2 浏览器兼容方案

/* 旧版语法兼容 */
.container {
  display: -webkit-box; /* 旧版WebKit */
  display: -ms-flexbox; /* IE10 */
  display: flex;
}
/* 属性前缀处理 */
.item {
  -webkit-box-flex: 1; /* 旧版语法 */
  -ms-flex: 1; /* IE10 */
  flex: 1;
}

五、常见问题解决方案

5.1 项目溢出容器

.container {
  min-width: 0; /* 解决flex项目内容溢出问题 */
}

5.2 百分比padding失效

.item {
  flex: 0 0 auto; /* 固定宽度时恢复百分比padding */
  width: 30%;
  padding: 5%;
}

5.3 嵌套Flex的z-index问题

.parent {
  position: relative;
  z-index: 1;
}
.child {
  position: relative;
  z-index: 2; /* 确保嵌套层级正确 */
}

通过系统掌握上述flex属性体系，开发者能够高效实现从简单对齐到复杂响应式布局的所有需求。建议通过CodePen等工具实践不同属性组合，逐步构建Flex布局的直觉认知。