CSS3 布局 - align-content 属性教程

什么是 align-content 属性？

align-content 是 CSS Grid 布局中的属性，用于控制网格容器内所有网格行在垂直方向上的对齐方式。当网格容器的高度大于所有网格行的总高度时，这个属性会生效，决定如何分配剩余的垂直空间。

语法

align-content: <value>;

取值说明

取值 描述
start 网格行在容器的起始边缘对齐（顶部）
end 网格行在容器的结束边缘对齐（底部）
center 网格行在容器内垂直居中对齐
space-between 网格行之间均匀分布，两端对齐容器边缘
space-around 网格行周围均匀分布空间，两端空间是中间空间的一半
space-evenly 网格行之间和两端的空间都均匀分布
stretch 网格行拉伸以填充整个容器高度（默认值）

代码示例

示例 1：不同 align-content 值的效果对比

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-content 属性示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 100px 100px;
            grid-template-rows: 80px 80px;
            grid-gap: 20px;
            padding: 20px;
            background-color: #f0f0f0;
            margin: 20px 0;
            height: 400px; /* 容器高度大于网格行总高度 */
        }
        .grid-item {
            padding: 20px;
            background-color: #4CAF50;
            color: white;
            border-radius: 5px;
            text-align: center;
        }
        .start {
            align-content: start;
        }
        .end {
            align-content: end;
        }
        .center {
            align-content: center;
        }
        .space-between {
            align-content: space-between;
        }
        .space-around {
            align-content: space-around;
        }
        .space-evenly {
            align-content: space-evenly;
        }
        .stretch {
            align-content: stretch;
        }
        .container-title {
            font-weight: bold;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h2>align-content: start;</h2>
    <div class="grid-container start">
        <div class="grid-item">项目 1</div>
        <div class="grid-item">项目 2</div>
        <div class="grid-item">项目 3</div>
        <div class="grid-item">项目 4</div>
    </div>
    
    <h2>align-content: end;</h2>
    <div class="grid-container end">
        <div class="grid-item">项目 1</div>
        <div class="grid-item">项目 2</div>
        <div class="grid-item">项目 3</div>
        <div class="grid-item">项目 4</div>
    </div>
    
    <h2>align-content: center;</h2>
    <div class="grid-container center">
        <div class="grid-item">项目 1</div>
        <div class="grid-item">项目 2</div>
        <div class="grid-item">项目 3</div>
        <div class="grid-item">项目 4</div>
    </div>
    
    <h2>align-content: space-between;</h2>
    <div class="grid-container space-between">
        <div class="grid-item">项目 1</div>
        <div class="grid-item">项目 2</div>
        <div class="grid-item">项目 3</div>
        <div class="grid-item">项目 4</div>
    </div>
    
    <h2>align-content: space-around;</h2>
    <div class="grid-container space-around">
        <div class="grid-item">项目 1</div>
        <div class="grid-item">项目 2</div>
        <div class="grid-item">项目 3</div>
        <div class="grid-item">项目 4</div>
    </div>
    
    <h2>align-content: space-evenly;</h2>
    <div class="grid-container space-evenly">
        <div class="grid-item">项目 1</div>
        <div class="grid-item">项目 2</div>
        <div class="grid-item">项目 3</div>
        <div class="grid-item">项目 4</div>
    </div>
    
    <h2>align-content: stretch;</h2>
    <div class="grid-container stretch">
        <div class="grid-item">项目 1</div>
        <div class="grid-item">项目 2</div>
        <div class="grid-item">项目 3</div>
        <div class="grid-item">项目 4</div>
    </div>
</body>
</html>

示例 2：响应式布局中的应用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局中的 align-content 示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            grid-gap: 20px;
            padding: 20px;
            background-color: #f5f5f5;
            min-height: 600px;
        }
        .grid-item {
            padding: 20px;
            background-color: #2196F3;
            color: white;
            border-radius: 5px;
            text-align: center;
        }
        @media (min-width: 768px) {
            .grid-container {
                align-content: space-between;
            }
        }
        @media (max-width: 767px) {
            .grid-container {
                align-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">项目 1</div>
        <div class="grid-item">项目 2</div>
        <div class="grid-item">项目 3</div>
        <div class="grid-item">项目 4</div>
        <div class="grid-item">项目 5</div>
        <div class="grid-item">项目 6</div>
    </div>
</body>
</html>

示例 3：实际应用 - 垂直居中布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中布局示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;
            grid-gap: 30px;
            padding: 40px;
            min-height: 100vh;
            align-content: center;
            background-color: #f0f0f0;
        }
        .header {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 8px;
        }
        .content {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .footer {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>网站标题</h1>
        </div>
        <div class="content">
            <h2>欢迎访问我们的网站</h2>
            <p>这是一个使用 align-content: center; 实现的垂直居中布局示例。</p>
            <p>无论容器高度如何变化，内容都会保持垂直居中。</p>
        </div>
        <div class="footer">
            <p>版权所有 © 2023</p>
        </div>
    </div>
</body>
</html>

布局图示

以下是 align-content 不同值的布局示意图：

┌─────────────────────────────────────────────┐
│              align-content: start           │
├─────────────────────────────────────────────┤
│ [项目 1] [项目 2]                           │
│ [项目 3] [项目 4]                           │
│                                             │
│                                             │
│                                             │
│                                             │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│              align-content: end             │
├─────────────────────────────────────────────┤
│                                             │
│                                             │
│                                             │
│                                             │
│ [项目 1] [项目 2]                           │
│ [项目 3] [项目 4]                           │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│             align-content: center          │
├─────────────────────────────────────────────┤
│                                             │
│                                             │
│ [项目 1] [项目 2]                           │
│ [项目 3] [项目 4]                           │
│                                             │
│                                             │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│         align-content: space-between        │
├─────────────────────────────────────────────┤
│ [项目 1] [项目 2]                           │
│                                             │
│                                             │
│                                             │
│ [项目 3] [项目 4]                           │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│          align-content: space-around        │
├─────────────────────────────────────────────┤
│                                             │
│ [项目 1] [项目 2]                           │
│                                             │
│ [项目 3] [项目 4]                           │
│                                             │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│         align-content: space-evenly         │
├─────────────────────────────────────────────┤
│                                             │
│ [项目 1] [项目 2]                           │
│                                             │
│ [项目 3] [项目 4]                           │
│                                             │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│            align-content: stretch           │
├─────────────────────────────────────────────┤
│ [项目 1] [项目 2]                           │
│                                             │
│                                             │
│                                             │
│ [项目 3] [项目 4]                           │
└─────────────────────────────────────────────┘

实际应用场景

场景 1：全屏垂直居中布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏垂直居中布局示例</title>
    <style>
        .fullscreen-container {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            min-height: 100vh;
            align-content: center;
            justify-content: center;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .content-box {
            background-color: white;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            max-width: 500px;
            text-align: center;
        }
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="fullscreen-container">
        <div class="content-box">
            <h1>欢迎使用我们的服务</h1>
            <p>这是一个全屏垂直居中布局的示例，使用 align-content: center; 和 justify-content: center;</p>
            <p>无论屏幕尺寸如何变化，内容都会保持在屏幕中央。</p>
            <a href="#" class="btn">了解更多</a>
        </div>
    </div>
</body>
</html>

场景 2：卡片网格垂直布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡片网格垂直布局示例</title>
    <style>
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-gap: 30px;
            padding: 40px;
            min-height: 800px;
            align-content: space-around;
            max-width: 1200px;
            margin: 0 auto;
            background-color: #f5f5f5;
        }
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .card-header {
            background-color: #3498db;
            color: white;
            padding: 15px;
        }
        .card-body {
            padding: 15px;
        }
        .card-footer {
            background-color: #f8f9fa;
            padding: 15px;
            border-top: 1px solid #e9ecef;
            text-align: center;
        }
        .btn {
            display: inline-block;
            padding: 8px 16px;
            background-color: #27ae60;
            color: white;
            text-decoration: none;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="card-grid">
        <div class="card">
            <div class="card-header">基础套餐</div>
            <div class="card-body">
                <p>适合个人用户和小型项目</p>
                <p>¥99/月</p>
            </div>
            <div class="card-footer">
                <a href="#" class="btn">选择</a>
            </div>
        </div>
        <div class="card">
            <div class="card-header">专业套餐</div>
            <div class="card-body">
                <p>适合专业用户和中型项目</p>
                <p>¥199/月</p>
            </div>
            <div class="card-footer">
                <a href="#" class="btn">选择</a>
            </div>
        </div>
        <div class="card">
            <div class="card-header">企业套餐</div>
            <div class="card-body">
                <p>适合大型企业和团队协作</p>
                <p>¥299/月</p>
            </div>
            <div class="card-footer">
                <a href="#" class="btn">选择</a>
            </div>
        </div>
        <div class="card">
            <div class="card-header">定制套餐</div>
            <div class="card-body">
                <p>根据您的需求定制</p>
                <p>联系我们获取报价</p>
            </div>
            <div class="card-footer">
                <a href="#" class="btn">联系我们</a>
            </div>
        </div>
    </div>
</body>
</html>

浏览器兼容性

浏览器 支持版本
Chrome 57+
Firefox 52+
Safari 10.1+
Edge 16+
IE 不支持

总结

align-content 属性是 CSS Grid 布局中控制网格行垂直对齐的重要工具，它允许您：

  1. 灵活分配空间：当容器高度大于网格行总高度时，控制如何分配剩余空间
  2. 多种对齐选项：包括 start、end、center、space-between、space-around、space-evenly 等
  3. 创建美观布局：通过合理的空间分配，创建更加美观和专业的网页布局
  4. 响应式设计：在不同屏幕尺寸下调整网格行的对齐方式
  5. 增强用户体验：通过合理的空间分配，提高页面的可读性和用户体验

练习作业

  1. 基础练习：创建一个包含 4 个网格项的布局，设置容器高度大于网格行总高度，分别尝试 align-content 的不同取值，观察效果差异。

  2. 进阶练习：创建一个全屏垂直居中布局，使用 align-content: center; 和 justify-content: center; 实现内容在屏幕中央显示。

  3. 挑战练习：创建一个响应式卡片网格布局，使用 align-content 控制卡片的垂直对齐方式，并确保在不同屏幕尺寸上都能良好显示。

扩展阅读

通过本教程，您应该已经掌握了 align-content 属性的使用方法，能够在 Grid 布局中灵活控制网格行的垂直对齐方式，创建出更加美观和专业的网页布局。

« 上一篇 113-justify-content-property 下一篇 » 115-grid-auto-columns-property
↑