CSS justify-content 属性-代码号

CSS justify-content 属性详解：Flexbox 主轴对齐指南

属性概述

justify-content 是 CSS Flexbox 布局中的核心属性，用于控制弹性容器内项目在主轴方向上的对齐方式。该属性负责管理项目之间以及项目与容器之间的空间分配，实现灵活的水平布局控制。

语法结构

justify-content: flex-start | flex-end | center | space-between | 
                 space-around | space-evenly | initial | inherit;

属性值详解

flex-start（默认值）

项目从主轴起始位置开始排列，所有项目紧贴容器开头

flex-end

项目从主轴结束位置开始排列，所有项目紧贴容器末尾

center

项目在主轴上居中对齐

space-between

项目均匀分布，第一个项目在起始位置，一个项目在结束位置

space-around

项目均匀分布，每个项目两侧都有相等的空间

space-evenly

项目均匀分布，所有间隔（包括边缘间隔）相等

initial

将属性重置为默认值 flex-start

inherit

从父元素继承 justify-content 属性值

基础应用示例

flex-start 起始对齐

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-start 起始对齐 - 代码号编程教程</title>
    <style>
        .container {
            display: flex;
            justify-content: flex-start;
            border: 2px solid #3498db;
            padding: 20px;
            margin: 20px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .item {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            margin: 0 10px;
            font-weight: bold;
        }
        
        .demo-title {
            text-align: center;
            color: #2c3e50;
            margin: 30px 0 10px 0;
        }
    </style>
</head>
<body>
    <h2 class="demo-title">flex-start - 项目从容器起始位置排列</h2>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

flex-end 末尾对齐

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-end 末尾对齐 - 代码号学习平台</title>
    <style>
        .container {
            display: flex;
            justify-content: flex-end;
            border: 2px solid #e74c3c;
            padding: 20px;
            margin: 20px;
            background: #fef9f9;
            border-radius: 8px;
        }
        
        .item {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            margin: 0 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h2 class="demo-title">flex-end - 项目从容器末尾位置排列</h2>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

center 居中对齐

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>center 居中对齐 - 代码号前端教程</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            border: 2px solid #27ae60;
            padding: 20px;
            margin: 20px;
            background: #f0fdf4;
            border-radius: 8px;
        }
        
        .item {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            margin: 0 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h2 class="demo-title">center - 项目在容器中居中对齐</h2>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

空间分布示例

space-between 两端对齐

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>space-between 两端对齐 - 代码号布局教程</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            border: 2px solid #f39c12;
            padding: 20px;
            margin: 20px;
            background: #fef9e7;
            border-radius: 8px;
        }
        
        .item {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            font-weight: bold;
        }
        
        .code-example {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 20px;
            border-radius: 8px;
            margin: 20px;
            font-family: 'Consolas', monospace;
        }
    </style>
</head>
<body>
    <h2 class="demo-title">space-between - 项目两端对齐，间隔相等</h2>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <div class="code-example">
        // 代码号编程示例：导航菜单布局<br>
        .nav-menu {<br>
        &nbsp;&nbsp;display: flex;<br>
        &nbsp;&nbsp;justify-content: space-between;<br>
        &nbsp;&nbsp;width: 100%;<br>
        }
    </div>
</body>
</html>

space-around 环绕分布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>space-around 环绕分布 - 代码号UI设计</title>
    <style>
        .container {
            display: flex;
            justify-content: space-around;
            border: 2px solid #9b59b6;
            padding: 20px;
            margin: 20px;
            background: #f8f9fc;
            border-radius: 8px;
        }
        
        .item {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            font-weight: bold;
        }
        
        .usage-desc {
            background: #e8f4fc;
            padding: 15px;
            border-radius: 6px;
            margin: 20px;
            border-left: 4px solid #3498db;
        }
    </style>
</head>
<body>
    <h2 class="demo-title">space-around - 每个项目两侧都有相等空间</h2>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <div class="usage-desc">
        <strong>应用场景：</strong>适合需要均匀分布但边缘也需要留白的布局，如卡片布局、功能图标展示等。
    </div>
</body>
</html>

space-evenly 均匀分布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>space-evenly 均匀分布 - 代码号实践</title>
    <style>
        .container {
            display: flex;
            justify-content: space-evenly;
            border: 2px solid #1abc9c;
            padding: 20px;
            margin: 20px;
            background: #e8f8f5;
            border-radius: 8px;
        }
        
        .item {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            font-weight: bold;
        }
        
        .comparison {
            display: flex;
            justify-content: space-around;
            margin: 30px 0;
        }
        
        .comparison-item {
            text-align: center;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <h2 class="demo-title">space-evenly - 所有间隔相等</h2>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <div class="comparison">
        <div class="comparison-item">
            <h4>space-between</h4>
            <p>两端贴边，中间等距</p>
        </div>
        <div class="comparison-item">
            <h4>space-around</h4>
            <p>每个项目两侧等距</p>
        </div>
        <div class="comparison-item">
            <h4>space-evenly</h4>
            <p>所有间隔相等</p>
        </div>
    </div>
</body>
</html>

实际应用场景

导航菜单布局

<!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>
        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 0 30px;
            height: 60px;
            color: white;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .nav-item {
            margin: 0 15px;
        }
        
        .nav-item a {
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 4px;
            transition: background 0.3s ease;
        }
        
        .nav-item a:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .user-actions {
            display: flex;
            align-items: center;
        }
        
        .btn {
            padding: 8px 20px;
            border: none;
            border-radius: 4px;
            margin-left: 10px;
            cursor: pointer;
            font-weight: 500;
        }
        
        .btn-login {
            background: transparent;
            border: 1px solid white;
            color: white;
        }
        
        .btn-signup {
            background: white;
            color: #667eea;
        }
    </style>
</head>
<body>
    <nav class="nav-container">
        <div class="logo">代码号</div>
        
        <ul class="nav-menu">
            <li class="nav-item"><a href="https://www.ebingou.cn/">首页</a></li>
            <li class="nav-item"><a href="https://www.ebingou.cn/jiaocheng/">教程</a></li>
            <li class="nav-item"><a href="https://www.ebingou.cn/biancheng/">编程</a></li>
            <li class="nav-item"><a href="https://www.ebingou.cn/yuanma/">源码</a></li>
        </ul>
        
        <div class="user-actions">
            <button class="btn btn-login">登录</button>
            <button class="btn btn-signup">注册</button>
        </div>
    </nav>
</body>
</html>

卡片布局系统

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡片布局系统 - 代码号UI组件</title>
    <style>
        .card-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 30px;
            padding: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .card {
            flex: 1;
            min-width: 280px;
            max-width: 350px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }
        
        .card-header {
            padding: 25px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
        }
        
        .card-body {
            padding: 25px;
        }
        
        .card-title {
            font-size: 20px;
            margin: 0 0 15px 0;
            color: #2c3e50;
        }
        
        .card-desc {
            color: #7f8c8d;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        .card-features {
            list-style: none;
            padding: 0;
            margin: 0 0 25px 0;
        }
        
        .card-features li {
            padding: 8px 0;
            border-bottom: 1px solid #ecf0f1;
            color: #34495e;
        }
        
        .card-features li:last-child {
            border-bottom: none;
        }
        
        .card-button {
            display: block;
            width: 100%;
            padding: 12px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        
        .card-button:hover {
            background: #2980b9;
        }
    </style>
</head>
<body>
    <div class="card-container">
        <div class="card">
            <div class="card-header">
                <h3>基础教程</h3>
            </div>
            <div class="card-body">
                <h4 class="card-title">HTML/CSS 入门</h4>
                <p class="card-desc">从零开始学习网页开发基础，掌握HTML标签和CSS样式。</p>
                <ul class="card-features">
                    <li>30+ 实践项目</li>
                    <li>实时代码编辑器</li>
                    <li>进度跟踪系统</li>
                </ul>
                <button class="card-button">开始学习</button>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h3>进阶课程</h3>
            </div>
            <div class="card-body">
                <h4 class="card-title">JavaScript 精讲</h4>
                <p class="card-desc">深入学习JavaScript核心概念，掌握现代前端开发技术。</p>
                <ul class="card-features">
                    <li>ES6+ 新特性</li>
                    <li>异步编程</li>
                    <li>框架原理剖析</li>
                </ul>
                <button class="card-button">立即报名</button>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h3>项目实战</h3>
            </div>
            <div class="card-body">
                <h4 class="card-title">全栈开发</h4>
                <p class="card-desc">从设计到部署，完整实现一个现代Web应用程序。</p>
                <ul class="card-features">
                    <li>前后端分离</li>
                    <li>数据库设计</li>
                    <li>部署运维</li>
                </ul>
                <button class="card-button">查看项目</button>
            </div>
        </div>
    </div>
</body>
</html>

本节课程知识要点

主轴对齐：justify-content 只影响主轴方向的对齐
默认行为：flex-start 为默认值，项目从起始位置排列
空间分配：space-* 系列值控制项目间的空间分布方式
垂直对齐：需使用 align-items 属性控制交叉轴方向
响应式考虑：不同屏幕尺寸下可能需要调整对齐方式
浏览器支持：所有现代浏览器都良好支持此属性

浏览器兼容性

Chrome 29+
Firefox 20+
Safari 9+
Edge 12+
Internet Explorer 11+

总结

justify-content 是 Flexbox 布局中至关重要的属性，通过合理运用不同的对齐方式，可以创建出灵活且美观的页面布局。掌握这些对齐技巧对于现代前端开发具有重要意义。

本文标签：

CSS justify-content 属性