Flexbox弹性布局

Flexbox弹性布局是CSS3中一种强大的布局方式，它通过容器和项目的概念简化了复杂布局的实现。不同于传统的浮动或定位布局，Flexbox提供了更灵活的空间分配和对齐方式，尤其适合响应式设计场景。

Flexbox的基本概念

Flexbox布局由两个核心部分组成：flex容器和flex项目。容器通过设置display: flex或display: inline-flex来启用弹性布局，其直接子元素自动成为flex项目。

.container {
  display: flex;
  border: 1px solid #ccc;
  padding: 10px;
}
.item {
  background-color: #f0f0f0;
  padding: 20px;
  margin: 5px;
}

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

容器属性详解

flex-direction

定义主轴方向，控制项目的排列方式：

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

.container {
  flex-direction: row-reverse;
}

justify-content

控制主轴上的对齐方式：

• flex-start（默认）：向主轴起点对齐
• flex-end：向主轴终点对齐
• center：居中对齐
• space-between：两端对齐，项目间隔相等
• space-around：每个项目两侧间隔相等
• space-evenly：项目与容器边缘间隔相等

.container {
  justify-content: space-around;
}

align-items

控制交叉轴上的对齐方式：

• stretch（默认）：拉伸填满容器高度
• flex-start：向交叉轴起点对齐
• flex-end：向交叉轴终点对齐
• center：居中对齐
• baseline：按基线对齐

.container {
  align-items: center;
  height: 200px;
}

项目属性详解

flex-grow

定义项目的放大比例，默认值为0（不放大）。当容器有剩余空间时，按比例分配。

.item:nth-child(1) {
  flex-grow: 1;
}
.item:nth-child(2) {
  flex-grow: 2;
}

flex-shrink

定义项目的缩小比例，默认值为1（等比例缩小）。当空间不足时，按比例收缩。

.item:nth-child(2) {
  flex-shrink: 2;
}

flex-basis

定义项目在分配多余空间之前的初始大小，默认值为auto。

.item {
  flex-basis: 100px;
}

实际应用案例

圣杯布局实现

传统三栏布局用Flexbox可以轻松实现：

.container {
  display: flex;
  min-height: 300px;
}
.main {
  flex: 1;
  order: 2;
}
.left {
  width: 200px;
  order: 1;
}
.right {
  width: 150px;
  order: 3;
}

<div class="container">
  <div class="main">主内容区</div>
  <div class="left">左侧边栏</div>
  <div class="right">右侧边栏</div>
</div>

垂直居中

困扰前端多年的垂直居中问题，用Flexbox两行代码解决：

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

响应式导航栏

创建自适应导航菜单：

.nav {
  display: flex;
  flex-wrap: wrap;
}
.nav-item {
  flex: 1 0 100px;
  text-align: center;
}
@media (max-width: 600px) {
  .nav-item {
    flex-basis: 50%;
  }
}

高级技巧与注意事项

嵌套Flex容器

Flex项目本身可以成为Flex容器，实现复杂布局：

.card {
  display: flex;
  flex-direction: column;
}
.card-header {
  display: flex;
  justify-content: space-between;
}

空白处理

gap属性可以方便地设置项目间距：

.container {
  gap: 10px;
}

性能考量

虽然Flexbox性能较好，但深层嵌套或大量项目仍可能影响渲染性能。在移动端设备上，避免超过3层嵌套。

浏览器兼容性实践

现代浏览器对Flexbox支持良好，但某些旧版本需要前缀：

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

可以使用Autoprefixer等工具自动处理前缀问题。对于必须支持IE10以下的场景，建议准备降级方案。

Flexbox与其他布局方式的对比

与Grid布局相比，Flexbox更适合一维布局（行或列），而Grid适合二维布局。实际项目中经常组合使用：

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
}
.sidebar {
  display: flex;
  flex-direction: column;
}