CSS Flex弹性盒：现代网页适配的核心技术

2025-12-20 8999阅读

一、Flex布局的基本概念

在前端开发中，布局是构建网页的核心环节。传统布局方式（如浮动、定位）存在诸多局限：元素脱离文档流导致难以控制，多列布局需复杂计算，响应式适配时需大量媒体查询。CSS Flexbox（弹性盒模型）的出现，彻底简化了一维空间的布局问题，通过声明式语法实现灵活的元素排列与对齐。

Flex布局由容器（flex container） 和项目（flex items） 组成：容器通过display: flex激活弹性布局，项目则是容器内的直接子元素。布局方向由主轴（main axis） 和交叉轴（cross axis） 定义：

主轴：由flex-direction控制（默认水平方向row）
交叉轴：与主轴垂直的方向（默认垂直方向column）

/* 容器设置为Flex，激活弹性布局 */
.container {
  display: flex; /* 关键声明 */
  flex-direction: row; /* 主轴方向：水平（默认值） */
  /* 其他属性：justify-content, align-items等 */
}

二、Flex容器核心属性

1. 主轴对齐方式（justify-content）

控制项目沿主轴的分布方式，常用值包括：

flex-start：项目左对齐（默认）
center：项目居中对齐
space-between：两端对齐，项目间等距
space-around：项目两侧等距，整体居中

/* 导航栏布局：两端对齐 */
.navbar {
  display: flex;
  justify-content: space-between; /* 项目沿主轴两端对齐 */
  align-items: center; /* 垂直居中 */
  padding: 0 1rem;
  background: #f8f9fa;
}

.logo {
  font-size: 1.2rem;
  font-weight: bold;
}

.nav-links {
  display: flex;
  gap: 1.5rem; /* 项目间距（现代语法，替代margin） */
  list-style: none;
  margin: 0;
}

2. 交叉轴对齐方式（align-items）

控制项目沿交叉轴的对齐方式，常用值：

stretch：项目拉伸填满容器（默认）
center：项目垂直居中
flex-start/flex-end：项目顶部/底部对齐

/* 垂直居中卡片容器 */
.card-wrapper {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 300px; /* 固定高度 */
}

.card {
  width: 200px;
  height: 150px;
  background: #e9ecef;
  border-radius: 4px;
}

3. 换行控制（flex-wrap）

默认情况下项目不换行，设置wrap可自动换行：

/* 自适应多列布局 */
.gallery {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 1rem; /* 项目间距 */
  padding: 1rem;
}

.gallery-item {
  flex: 1 1 200px; /* 基础宽度200px，可伸缩 */
  min-width: 200px;
  height: 150px;
  background: #dee2e6;
  border-radius: 4px;
}

三、Flex项目核心属性

1. 伸缩比例（flex-grow/flex-shrink）

flex-grow：项目放大比例（默认0，不放大）
flex-shrink：项目缩小比例（默认1，可缩小）
flex-basis：项目初始尺寸（默认auto）

/* 卡片宽度自适应分配 */
.dashboard {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

.stat-card {
  flex: 1 1 0; /* 等价于 flex-grow:1; flex-shrink:1; flex-basis:0 */
  background: #fff;
  padding: 1rem;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 关键：flex-basis设为0，使各卡片初始宽度相同，再按比例分配剩余空间 */
.stat-card:nth-child(1) { flex: 2 1 0; } /* 占2份 */
.stat-card:nth-child(2) { flex: 1 1 0; } /* 占1份 */

2. 对齐覆盖（align-self）

单独控制某个项目在交叉轴的对齐方式，覆盖容器的align-items：

/* 特殊对齐的项目 */
.container {
  display: flex;
  align-items: flex-start; /* 容器默认顶部对齐 */
  gap: 1rem;
}

.item1 { align-self: center; } /* 居中 */
.item2 { align-self: flex-end; } /* 底部对齐 */
.item3 { align-self: stretch; } /* 拉伸（默认） */

3. 排序控制（order）

通过修改order属性调整项目顺序（默认0，正整数在前，负整数在后）：

/* 反向排序导航项 */
.nav {
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0;
}

.nav-item {
  order: 1; /* 最后一个项目 */
}

.nav-item:nth-child(1) { order: 3; } /* 第一个项目 */
.nav-item:nth-child(2) { order: 2; } /* 第二个项目 */

四、Flex适配场景实战

1. 移动端导航适配

<nav class="mobile-nav">
  <a href="#" class="nav-icon">☰</a>
  <ul class="nav-links">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

.mobile-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #343a40;
  color: #fff;
}

.nav-links {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 移动端隐藏链接，显示汉堡菜单 */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* 隐藏链接 */
  }
  .mobile-nav:hover .nav-links {
    display: flex; /* hover显示（简化版，实际需JS控制） */
    flex-direction: column; /* 垂直排列 */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #343a40;
    padding: 1rem;
    gap: 0.5rem;
  }
}

2. 响应式卡片列表

/* 自适应卡片网格 */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}

.product-card {
  flex: 1 1 280px; /* 基础宽度280px，可伸缩 */
  min-width: 280px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.product-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.product-info {
  margin-top: 0.5rem;
}

3. 水平垂直居中布局


/* 万能居中方案 */
.centered-box {