CSS3 布局 - justify-content 属性教程

什么是 justify-content 属性？

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

语法

justify-content: <value>;

取值说明

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

代码示例

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>justify-content 属性示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px;
            grid-gap: 20px;
            padding: 20px;
            background-color: #f0f0f0;
            margin: 20px 0;
            width: 600px; /* 容器宽度大于网格项总宽度 */
        }
        .grid-item {
            padding: 20px;
            background-color: #4CAF50;
            color: white;
            border-radius: 5px;
            text-align: center;
        }
        .start {
            justify-content: start;
        }
        .end {
            justify-content: end;
        }
        .center {
            justify-content: center;
        }
        .space-between {
            justify-content: space-between;
        }
        .space-around {
            justify-content: space-around;
        }
        .space-evenly {
            justify-content: space-evenly;
        }
        .container-title {
            font-weight: bold;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h2>justify-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>
    
    <h2>justify-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>
    
    <h2>justify-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>
    
    <h2>justify-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>
    
    <h2>justify-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>
    
    <h2>justify-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>
</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>响应式布局中的 justify-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: 200px;
        }
        .grid-item {
            padding: 20px;
            background-color: #2196F3;
            color: white;
            border-radius: 5px;
            text-align: center;
        }
        @media (min-width: 768px) {
            .grid-container {
                justify-content: space-between;
            }
        }
        @media (max-width: 767px) {
            .grid-container {
                justify-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>
</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>
        .navbar {
            background-color: #333;
            color: white;
            padding: 0 20px;
        }
        .nav-container {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            height: 60px;
        }
        .logo {
            font-size: 1.2em;
            font-weight: bold;
        }
        .nav-links {
            display: grid;
            grid-template-columns: repeat(4, auto);
            grid-gap: 20px;
            justify-content: center;
        }
        .nav-links a {
            color: white;
            text-decoration: none;
            padding: 5px 10px;
        }
        .nav-links a:hover {
            background-color: #555;
            border-radius: 4px;
        }
        .user-area {
            display: grid;
            grid-template-columns: auto auto;
            grid-gap: 10px;
        }
        .user-area a {
            color: white;
            text-decoration: none;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">MySite</div>
            <div class="nav-links">
                <a href="#">首页</a>
                <a href="#">关于我们</a>
                <a href="#">产品</a>
                <a href="#">联系我们</a>
            </div>
            <div class="user-area">
                <a href="#">登录</a>
                <a href="#">注册</a>
            </div>
        </div>
    </nav>
</body>
</html>

布局图示

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

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

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

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

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

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

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

实际应用场景

场景 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>
        .container {
            display: grid;
            justify-content: center;
            align-content: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .content {
            background-color: white;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            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="container">
        <div class="content">
            <h1>欢迎使用我们的服务</h1>
            <p>这是一个居中布局的示例，使用 justify-content: center;</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: 20px;
            padding: 40px;
            max-width: 1200px;
            margin: 0 auto;
            justify-content: space-between;
        }
        .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>
</body>
</html>

浏览器兼容性

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

总结

justify-content 属性是 CSS Grid 布局中控制网格项水平对齐的重要工具，它允许您：

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

练习作业

  1. 基础练习：创建一个包含 4 个网格项的布局，分别尝试 justify-content 的不同取值，观察效果差异。

  2. 进阶练习：创建一个响应式导航菜单，使用 justify-content 控制导航链接的对齐方式，并添加悬停效果。

  3. 挑战练习：创建一个产品展示页面，使用 justify-content 控制产品卡片的布局，并确保在不同屏幕尺寸上都能良好显示。

扩展阅读

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

« 上一篇 112-align-items-property 下一篇 » 114-align-content-property
↑