第6章：主轴上的对齐方式

justify-content 是Flex布局中最常用的属性之一，它控制项目在主轴上的对齐方式。通过这个属性，我们可以轻松实现各种水平对齐效果，如居中、两端对齐、均匀分布等。

6.1 justify-content 核心作用

justify-content 属性控制Flex项目在主轴上的对齐方式，它决定了项目之间以及项目与容器边框之间的空间分配。

6.2 6种常用值

1. flex-start（默认）

效果：项目靠主轴起点对齐
适用场景：需要项目从容器左侧（或顶部）开始排列时

2. flex-end

效果：项目靠主轴终点对齐
适用场景：需要项目从容器右侧（或底部）开始排列时

3. center

效果：项目在主轴上居中对齐
适用场景：需要项目水平（或垂直）居中时，如登录表单、弹窗内容等

4. space-between

效果：项目两端对齐，中间间距相等
适用场景：需要项目均匀分布，且两端项目贴边时，如导航栏、卡片布局等

5. space-around

效果：项目两侧间距相等，整体间距均匀
适用场景：需要项目均匀分布，且整体有边距时

6. space-evenly

效果：所有项目间距（包括两端）完全相等
适用场景：需要项目完全均匀分布时

代码示例

html

<!DOCTYPE html>
<html>
<head>
  <title>justify-content 示例</title>
  <style>
    .container {
      display: flex;
      height: 150px;
      background-color: #f0f0f0;
      border: 1px solid #ddd;
      margin: 10px 0;
      padding: 10px;
    }
    
    .flex-start {
      justify-content: flex-start;
    }
    
    .flex-end {
      justify-content: flex-end;
    }
    
    .center {
      justify-content: center;
    }
    
    .space-between {
      justify-content: space-between;
    }
    
    .space-around {
      justify-content: space-around;
    }
    
    .space-evenly {
      justify-content: space-evenly;
    }
    
    .item {
      width: 80px;
      height: 80px;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>justify-content 示例</h1>
  
  <h2>justify-content: flex-start（默认）</h2>
  <div class="container flex-start">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>justify-content: flex-end</h2>
  <div class="container flex-end">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>justify-content: center</h2>
  <div class="container center">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>justify-content: space-between</h2>
  <div class="container space-between">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>justify-content: space-around</h2>
  <div class="container space-around">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>justify-content: space-evenly</h2>
  <div class="container space-evenly">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

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

案例1：导航栏布局

html

<!DOCTYPE html>
<html>
<head>
  <title>导航栏布局</title>
  <style>
    .navbar {
      display: flex;
      justify-content: space-between;
      background-color: #333;
      color: white;
      padding: 10px 20px;
    }
    
    .logo {
      font-size: 20px;
      font-weight: bold;
    }
    
    .nav-links {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .nav-links li {
      margin-left: 20px;
    }
    
    .nav-links a {
      color: white;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="logo">Logo</div>
    <ul class="nav-links">
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</body>
</html>

案例2：居中布局

html

<!DOCTYPE html>
<html>
<head>
  <title>居中布局</title>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 400px;
      background-color: #f0f0f0;
    }
    
    .content {
      width: 300px;
      padding: 30px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      text-align: center;
    }
    
    .button {
      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">
      <h2>欢迎使用我们的服务</h2>
      <p>这是一个居中布局的示例，使用 justify-content: center 和 align-items: center 实现。</p>
      <a href="#" class="button">了解更多</a>
    </div>
  </div>
</body>
</html>

6.4 新手易错点：主轴方向改变后，对齐方式的变化

当主轴方向改变时（例如从 row 改为 column），justify-content 控制的方向也会相应改变：

flex-direction: row（默认）：justify-content 控制水平方向对齐
flex-direction: column：justify-content 控制垂直方向对齐

代码示例

html

<!DOCTYPE html>
<html>
<head>
  <title>主轴方向改变后的对齐</title>
  <style>
    .container {
      display: flex;
      height: 300px;
      background-color: #f0f0f0;
      border: 1px solid #ddd;
      margin: 10px 0;
      padding: 10px;
    }
    
    .column {
      flex-direction: column;
    }
    
    .center {
      justify-content: center;
    }
    
    .space-between {
      justify-content: space-between;
    }
    
    .item {
      width: 80px;
      height: 60px;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>主轴方向改变后的对齐</h1>
  
  <h2>flex-direction: row + justify-content: center</h2>
  <div class="container center">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>flex-direction: column + justify-content: center</h2>
  <div class="container column center">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>flex-direction: column + justify-content: space-between</h2>
  <div class="container column space-between">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

实操练习

创建一个使用 justify-content: space-between 的导航栏
创建一个使用 justify-content: center 的登录表单
尝试不同的主轴方向，观察 justify-content 的效果变化
对比 space-between、space-around 和 space-evenly 的区别

通过本节的学习，你已经掌握了 justify-content 属性的使用方法，这是Flex布局中最常用的属性之一。合理使用这个属性，可以轻松实现各种水平对齐效果，使布局更加美观和专业。

第6章：主轴上的对齐方式 ​

6.1 justify-content 核心作用 ​

6.2 6种常用值 ​

1. flex-start（默认） ​

2. flex-end ​

3. center ​

4. space-between ​

5. space-around ​

6. space-evenly ​

代码示例 ​

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

案例1：导航栏布局 ​

案例2：居中布局 ​

6.4 新手易错点：主轴方向改变后，对齐方式的变化 ​

代码示例 ​

实操练习 ​

第6章：主轴上的对齐方式

6.1 justify-content 核心作用

6.2 6种常用值

1. flex-start（默认）

2. flex-end

3. center

4. space-between

5. space-around

6. space-evenly

代码示例

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

案例1：导航栏布局

案例2：居中布局

6.4 新手易错点：主轴方向改变后，对齐方式的变化

代码示例

实操练习