第7章：交叉轴上的对齐方式

在Flex布局中，除了控制主轴上的对齐方式外，我们还需要控制交叉轴上的对齐方式。align-items 和 align-content 这两个属性可以帮助我们实现各种垂直对齐效果。

7.1 align-items：控制单个项目在交叉轴上的对齐

align-items 属性控制单个项目在交叉轴上的对齐方式。它有以下常用值：

1. stretch（默认）

效果：项目拉伸至与容器交叉轴高度一致
适用场景：需要项目填满容器高度时

2. flex-start

效果：项目靠交叉轴起点对齐
适用场景：需要项目顶部（或左侧）对齐时

3. flex-end

效果：项目靠交叉轴终点对齐
适用场景：需要项目底部（或右侧）对齐时

4. center

效果：项目在交叉轴居中对齐
适用场景：需要项目垂直居中时，如卡片内容、按钮文字等

5. baseline

效果：项目按文字基线对齐
适用场景：需要文字在同一水平线上对齐时

代码示例

html

<!DOCTYPE html>
<html>
<head>
  <title>align-items 示例</title>
  <style>
    .container {
      display: flex;
      height: 200px;
      background-color: #f0f0f0;
      border: 1px solid #ddd;
      margin: 10px 0;
      padding: 10px;
    }
    
    .stretch {
      align-items: stretch;
    }
    
    .flex-start {
      align-items: flex-start;
    }
    
    .flex-end {
      align-items: flex-end;
    }
    
    .center {
      align-items: center;
    }
    
    .baseline {
      align-items: baseline;
    }
    
    .item {
      background-color: #3498db;
      color: white;
      padding: 10px;
      margin: 5px;
      border-radius: 4px;
    }
    
    .item1 {
      font-size: 20px;
    }
    
    .item2 {
      font-size: 14px;
    }
    
    .item3 {
      font-size: 28px;
    }
  </style>
</head>
<body>
  <h1>align-items 示例</h1>
  
  <h2>align-items: stretch（默认）</h2>
  <div class="container stretch">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>align-items: flex-start</h2>
  <div class="container flex-start">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>align-items: flex-end</h2>
  <div class="container flex-end">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>align-items: center</h2>
  <div class="container center">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>align-items: baseline</h2>
  <div class="container baseline">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>

7.2 align-content：控制多行项目在交叉轴上的对齐

align-content 属性控制多行项目在交叉轴上的对齐方式，仅在项目换行时生效。它有以下常用值：

1. flex-start

效果：多行项目靠交叉轴起点对齐
适用场景：需要多行项目顶部对齐时

2. flex-end

效果：多行项目靠交叉轴终点对齐
适用场景：需要多行项目底部对齐时

3. center

效果：多行项目在交叉轴居中对齐
适用场景：需要多行项目垂直居中时

4. space-between

效果：多行项目两端对齐，中间间距相等
适用场景：需要多行项目均匀分布，且上下项目贴边时

5. space-around

效果：多行项目两侧间距相等
适用场景：需要多行项目均匀分布，且整体有边距时

6. stretch（默认）

效果：多行项目拉伸至填满交叉轴
适用场景：需要多行项目填满容器高度时

代码示例

html

<!DOCTYPE html>
<html>
<head>
  <title>align-content 示例</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      height: 300px;
      background-color: #f0f0f0;
      border: 1px solid #ddd;
      margin: 10px 0;
      padding: 10px;
    }
    
    .flex-start {
      align-content: flex-start;
    }
    
    .flex-end {
      align-content: flex-end;
    }
    
    .center {
      align-content: center;
    }
    
    .space-between {
      align-content: space-between;
    }
    
    .space-around {
      align-content: space-around;
    }
    
    .stretch {
      align-content: stretch;
    }
    
    .item {
      width: 100px;
      height: 60px;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>align-content 示例</h1>
  
  <h2>align-content: flex-start</h2>
  <div class="container flex-start">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  
  <h2>align-content: flex-end</h2>
  <div class="container flex-end">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  
  <h2>align-content: center</h2>
  <div class="container center">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  
  <h2>align-content: space-between</h2>
  <div class="container space-between">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  
  <h2>align-content: space-around</h2>
  <div class="container space-around">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  
  <h2>align-content: stretch（默认）</h2>
  <div class="container stretch">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

7.3 align-items 与 align-content 的区别

特性	align-items	align-content
作用对象	单个项目	多行项目
生效条件	任何情况下	仅当项目换行时
控制方向	单个项目在交叉轴上的对齐	多行项目整体在交叉轴上的对齐
默认值	stretch	stretch

关键区别

align-items 控制的是单个项目在交叉轴上的对齐方式
align-content 控制的是多行项目整体在交叉轴上的对齐方式
如果项目没有换行（只有一行），align-content 不会生效

7.4 实操案例：单行/多行项目的交叉轴对齐

案例1：单行项目垂直居中

html

<!DOCTYPE html>
<html>
<head>
  <title>单行项目垂直居中</title>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
      background-color: #f0f0f0;
    }
    
    .item {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <h1>单行项目垂直居中</h1>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

案例2：多行项目垂直居中

html

<!DOCTYPE html>
<html>
<head>
  <title>多行项目垂直居中</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      height: 400px;
      background-color: #f0f0f0;
    }
    
    .item {
      width: 100px;
      height: 80px;
      background-color: #e74c3c;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <h1>多行项目垂直居中</h1>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

实操练习

创建一个单行项目垂直居中的布局
创建一个多行项目垂直居中的布局
尝试不同的 align-items 和 align-content 值，观察效果
理解两者的区别和适用场景

通过本节的学习，你已经掌握了控制交叉轴对齐的两个重要属性：align-items 和 align-content。合理使用这两个属性，可以轻松实现各种垂直对齐效果，使布局更加美观和专业。

第7章：交叉轴上的对齐方式 ​

7.1 align-items：控制单个项目在交叉轴上的对齐 ​

1. stretch（默认） ​

2. flex-start ​

3. flex-end ​

4. center ​

5. baseline ​

代码示例 ​

7.2 align-content：控制多行项目在交叉轴上的对齐 ​

1. flex-start ​

2. flex-end ​

3. center ​

4. space-between ​

5. space-around ​

6. stretch（默认） ​

代码示例 ​

7.3 align-items 与 align-content 的区别 ​

关键区别 ​

7.4 实操案例：单行/多行项目的交叉轴对齐 ​

案例1：单行项目垂直居中 ​

案例2：多行项目垂直居中 ​

实操练习 ​

第7章：交叉轴上的对齐方式

7.1 align-items：控制单个项目在交叉轴上的对齐

1. stretch（默认）

2. flex-start

3. flex-end

4. center

5. baseline

代码示例

7.2 align-content：控制多行项目在交叉轴上的对齐

1. flex-start

2. flex-end

3. center

4. space-between

5. space-around

6. stretch（默认）

代码示例

7.3 align-items 与 align-content 的区别

关键区别

7.4 实操案例：单行/多行项目的交叉轴对齐

案例1：单行项目垂直居中

案例2：多行项目垂直居中

实操练习