CSS3 布局 - justify-items 属性教程

什么是 justify-items 属性？

justify-items 是 CSS Grid 布局中的属性，用于控制网格项目在其单元格内的水平对齐方式。它设置了所有网格项目的默认水平对齐行为，作用于整个网格容器。

语法

justify-items: <value>;

取值说明

取值 描述
start 项目在单元格的起始边缘对齐（左侧）
end 项目在单元格的结束边缘对齐（右侧）
center 项目在单元格内水平居中对齐
stretch 项目拉伸以填充整个单元格的宽度（默认值）
baseline 项目基于其基线对齐
first baseline 项目基于其第一基线对齐
last baseline 项目基于其最后基线对齐

代码示例

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>justify-items 属性示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 150px 150px;
            grid-template-rows: 100px 100px;
            grid-gap: 20px;
            padding: 20px;
            background-color: #f0f0f0;
            margin: 20px 0;
        }
        .grid-item {
            padding: 15px;
            background-color: #4CAF50;
            color: white;
            border-radius: 5px;
            width: 80px; /* 为了明显看到对齐效果，设置固定宽度 */
        }
        .start {
            justify-items: start;
        }
        .end {
            justify-items: end;
        }
        .center {
            justify-items: center;
        }
        .stretch {
            justify-items: stretch;
        }
        .container-title {
            font-weight: bold;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h2>justify-items: 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>justify-items: 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>justify-items: 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>justify-items: 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：与 justify-self 结合使用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>justify-items 与 justify-self 结合示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 150px 150px 150px;
            grid-template-rows: 100px 100px;
            grid-gap: 20px;
            padding: 20px;
            background-color: #f0f0f0;
            justify-items: center; /* 默认为居中对齐 */
        }
        .grid-item {
            padding: 15px;
            background-color: #2196F3;
            color: white;
            border-radius: 5px;
            width: 80px; /* 为了明显看到对齐效果，设置固定宽度 */
        }
        .item1 {
            justify-self: start; /* 覆盖默认值，左对齐 */
        }
        .item4 {
            justify-self: end; /* 覆盖默认值，右对齐 */
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1">左对齐</div>
        <div class="grid-item">居中对齐</div>
        <div class="grid-item">居中对齐</div>
        <div class="grid-item item4">右对齐</div>
        <div class="grid-item">居中对齐</div>
        <div class="grid-item">居中对齐</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>
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-gap: 20px;
            padding: 20px;
            background-color: #f5f5f5;
            justify-items: center; /* 所有卡片居中对齐 */
        }
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow: hidden;
            width: 200px; /* 固定卡片宽度 */
        }
        .card-header {
            background-color: #3498db;
            color: white;
            padding: 15px;
            text-align: center;
        }
        .card-body {
            padding: 15px;
        }
        .card-footer {
            background-color: #f8f9fa;
            padding: 15px;
            border-top: 1px solid #e9ecef;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="card-grid">
        <div class="card">
            <div class="card-header">基础套餐</div>
            <div class="card-body">
                <p>适合个人用户和小型项目</p>
            </div>
            <div class="card-footer">
                <button>选择</button>
            </div>
        </div>
        <div class="card">
            <div class="card-header">专业套餐</div>
            <div class="card-body">
                <p>适合专业用户和中型项目</p>
            </div>
            <div class="card-footer">
                <button>选择</button>
            </div>
        </div>
        <div class="card">
            <div class="card-header">企业套餐</div>
            <div class="card-body">
                <p>适合大型企业和团队协作</p>
            </div>
            <div class="card-footer">
                <button>选择</button>
            </div>
        </div>
    </div>
</body>
</html>

布局图示

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

┌─────────────────────────────────────────────┐
│              justify-items: start           │
├───────────────┬─────────────────────────────┤
│               │                             │
│ [项目]         │ [项目]                     │
│               │                             │
├───────────────┼─────────────────────────────┤
│               │                             │
│ [项目]         │ [项目]                     │
│               │                             │
└───────────────┴─────────────────────────────┘

┌─────────────────────────────────────────────┐
│              justify-items: end             │
├───────────────┬─────────────────────────────┤
│               │                             │
│         [项目] │                     [项目] │
│               │                             │
├───────────────┼─────────────────────────────┤
│               │                             │
│         [项目] │                     [项目] │
│               │                             │
└───────────────┴─────────────────────────────┘

┌─────────────────────────────────────────────┐
│             justify-items: center          │
├───────────────┬─────────────────────────────┤
│               │                             │
│     [项目]     │         [项目]             │
│               │                             │
├───────────────┼─────────────────────────────┤
│               │                             │
│     [项目]     │         [项目]             │
│               │                             │
└───────────────┴─────────────────────────────┘

┌─────────────────────────────────────────────┐
│            justify-items: stretch           │
├───────────────┬─────────────────────────────┤
│               │                             │
│ [    项目    ] │ [        项目        ]     │
│               │                             │
├───────────────┼─────────────────────────────┤
│               │                             │
│ [    项目    ] │ [        项目        ]     │
│               │                             │
└───────────────┴─────────────────────────────┘

实际应用场景

场景 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>
        .navbar {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            background-color: #333;
            color: white;
            padding: 15px 20px;
        }
        .logo {
            font-size: 1.5em;
            font-weight: bold;
        }
        .nav-links {
            display: grid;
            grid-template-columns: repeat(4, auto);
            grid-gap: 20px;
            justify-items: center; /* 导航链接居中对齐 */
        }
        .nav-links a {
            color: white;
            text-decoration: none;
            padding: 5px 10px;
        }
        .nav-links a:hover {
            background-color: #555;
            border-radius: 4px;
        }
        .user-area {
            justify-self: end;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <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="#" style="color: white; text-decoration: none;">登录</a>
        </div>
    </nav>
</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>
        .form-grid {
            display: grid;
            grid-template-columns: 150px 1fr;
            grid-gap: 15px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            max-width: 600px;
            margin: 20px auto;
        }
        .form-group {
            display: contents;
        }
        .label {
            align-self: center;
        }
        .input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .button-group {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, auto));
            grid-gap: 10px;
            justify-items: end; /* 按钮右对齐 */
        }
        button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .submit {
            background-color: #4CAF50;
            color: white;
        }
        .cancel {
            background-color: #f44336;
            color: white;
        }
    </style>
</head>
<body>
    <form class="form-grid">
        <div class="form-group">
            <label class="label" for="name">姓名：</label>
            <input class="input" type="text" id="name" name="name">
        </div>
        <div class="form-group">
            <label class="label" for="email">邮箱：</label>
            <input class="input" type="email" id="email" name="email">
        </div>
        <div class="form-group">
            <label class="label" for="phone">电话：</label>
            <input class="input" type="tel" id="phone" name="phone">
        </div>
        <div class="button-group">
            <button type="button" class="cancel">取消</button>
            <button type="submit" class="submit">提交</button>
        </div>
    </form>
</body>
</html>

浏览器兼容性

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

总结

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

  1. 统一设置：为网格容器中的所有项目设置默认的水平对齐方式
  2. 多种对齐选项：包括 start、end、center、stretch 等
  3. 灵活覆盖：可以通过 justify-self 属性为单个项目覆盖默认对齐方式
  4. 响应式设计：在不同屏幕尺寸下调整项目的对齐方式
  5. 美化布局：创建更加美观和专业的网页布局

练习作业

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

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

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

扩展阅读

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

« 上一篇 110-grid-area-property 下一篇 » 112-align-items-property
↑