编程马·菜鸟教程

Appearance

第7章：网格项目排列与对齐 ​

在本节中，我们将介绍Grid布局中的对齐属性，这些属性用于控制网格和项目的对齐方式。

7.1 网格容器内整体对齐 ​

justify-content：控制网格在容器水平方向的对齐 ​

justify-content属性用于控制网格在容器水平方向（行轴）的对齐。

align-content：控制网格在容器垂直方向的对齐 ​

align-content属性用于控制网格在容器垂直方向（列轴）的对齐。

常用值 ​

  • flex-start：靠起始位置对齐
  • flex-end：靠结束位置对齐
  • center：居中对齐
  • space-between：两端对齐，中间间距相等
  • space-around：项目两侧间距相等，整体间距均匀
  • space-evenly：所有间距（包括两端）完全相等

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>网格容器整体对齐</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 100px);
      grid-template-rows: repeat(2, 80px);
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
      margin-bottom: 20px;
      height: 300px;
    }
    
    .justify-start {
      justify-content: flex-start;
    }
    
    .justify-center {
      justify-content: center;
    }
    
    .justify-end {
      justify-content: flex-end;
    }
    
    .justify-between {
      justify-content: space-between;
    }
    
    .justify-around {
      justify-content: space-around;
    }
    
    .justify-evenly {
      justify-content: space-evenly;
    }
    
    .align-start {
      align-content: flex-start;
    }
    
    .align-center {
      align-content: center;
    }
    
    .align-end {
      align-content: flex-end;
    }
    
    .item {
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>网格容器整体对齐</h1>
  
  <h2>justify-content: flex-start</h2>
  <div class="container justify-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>justify-content: center</h2>
  <div class="container justify-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>justify-content: flex-end</h2>
  <div class="container justify-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>justify-content: space-between</h2>
  <div class="container justify-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: flex-start</h2>
  <div class="container align-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: center</h2>
  <div class="container align-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: flex-end</h2>
  <div class="container align-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>
</body>
</html>

7.2 网格项目在单元格内的对齐 ​

justify-items：控制项目在单元格水平方向的对齐 ​

justify-items属性用于控制项目在单元格水平方向的对齐。

align-items：控制项目在单元格垂直方向的对齐 ​

align-items属性用于控制项目在单元格垂直方向的对齐。

常用值 ​

  • stretch（默认）：项目拉伸至填满单元格
  • flex-start：靠起始位置对齐
  • flex-end：靠结束位置对齐
  • center：居中对齐
  • baseline：按文字基线对齐

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>网格项目在单元格内的对齐</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 100px);
      grid-template-rows: repeat(2, 100px);
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
      margin-bottom: 20px;
    }
    
    .justify-stretch {
      justify-items: stretch;
    }
    
    .justify-start {
      justify-items: start;
    }
    
    .justify-center {
      justify-items: center;
    }
    
    .justify-end {
      justify-items: end;
    }
    
    .align-stretch {
      align-items: stretch;
    }
    
    .align-start {
      align-items: start;
    }
    
    .align-center {
      align-items: center;
    }
    
    .align-end {
      align-items: end;
    }
    
    .item {
      background-color: #e74c3c;
      color: white;
      padding: 10px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>网格项目在单元格内的对齐</h1>
  
  <h2>justify-items: stretch（默认）</h2>
  <div class="container justify-stretch">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>justify-items: start</h2>
  <div class="container justify-start">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>justify-items: center</h2>
  <div class="container justify-center">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>justify-items: end</h2>
  <div class="container justify-end">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>align-items: stretch（默认）</h2>
  <div class="container align-stretch">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>align-items: start</h2>
  <div class="container align-start">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>align-items: center</h2>
  <div class="container align-center">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>align-items: end</h2>
  <div class="container align-end">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

7.3 实操案例：不同对齐方式对比 ​

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>不同对齐方式对比</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 100px);
      grid-template-rows: repeat(2, 100px);
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
      margin-bottom: 20px;
      height: 300px;
    }
    
    .example1 {
      justify-content: center;
      align-content: center;
      justify-items: center;
      align-items: center;
    }
    
    .example2 {
      justify-content: space-between;
      align-content: space-around;
      justify-items: start;
      align-items: end;
    }
    
    .item {
      background-color: #2ecc71;
      color: white;
      padding: 20px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>不同对齐方式对比</h1>
  
  <h2>居中对齐</h2>
  <div class="container example1">
    <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>混合对齐</h2>
  <div class="container example2">
    <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.4 新手易错点：四种对齐属性的区别 ​

常见混淆 ​

  • 不知道什么时候使用justify-content和justify-items
  • 不知道什么时候使用align-content和align-items

区别 ​

属性作用对象作用方向适用场景
justify-content整个网格水平方向（行轴）网格整体在容器中的水平对齐
align-content整个网格垂直方向（列轴）网格整体在容器中的垂直对齐
justify-items单个项目水平方向（行轴）项目在单元格中的水平对齐
align-items单个项目垂直方向（列轴）项目在单元格中的垂直对齐

记忆技巧 ​

  • content 结尾的属性：作用于整个网格
  • items 结尾的属性：作用于单个项目
  • justify 开头的属性：控制水平方向
  • align 开头的属性：控制垂直方向

实操练习 ​

  1. 创建一个网格，使用不同的justify-content和align-content值
  2. 创建一个网格，使用不同的justify-items和align-items值
  3. 尝试混合使用这四种对齐属性，实现复杂的对齐效果
  4. 理解并记忆这四种对齐属性的区别

通过本节的学习，你已经掌握了Grid布局中的对齐属性。这些属性是Grid布局的重要组成部分，它们可以帮助你精确控制网格和项目的对齐方式，使布局更加美观和专业。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建