justify-content属性详解

justify-content 是 CSS 中 flexbox 和 grid 布局的重要属性之一，用于定义 主轴（main axis） 上的子元素如何对齐和分布。它主要控制 子元素之间的间距 和 子元素相对于容器的对齐方式。

语法

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

取值详解

1. flex-start

• 含义：子元素向主轴的起始位置对齐。
• 特点：所有子元素紧靠主轴起始位置，没有额外的间距。
• 效果：所有子元素靠左（或靠上，取决于主轴方向）。

justify-content: flex-start;

示例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  justify-content: flex-start;
}

效果：

| 1 2 3                     |

2. flex-end

• 含义：子元素向主轴的结束位置对齐。
• 特点：所有子元素紧靠主轴结束位置，没有额外的间距。
• 效果：所有子元素靠右（或靠下，取决于主轴方向）。

justify-content: flex-end;

示例：

.container {
  display: flex;
  justify-content: flex-end;
}

效果：

|                     1 2 3 |

3. center

• 含义：子元素在主轴方向上居中对齐。
• 特点：子元素在容器内居中显示，主轴两端留有相等的空白。
• 效果：子元素在容器中间。

justify-content: center;

示例：

.container {
  display: flex;
  justify-content: center;
}

效果：

|        1 2 3             |

4. space-between

• 含义：子元素均匀分布，第一个子元素靠近主轴起点，最后一个子元素靠近主轴终点。
• 特点：子元素之间的间距相等，但子元素与容器边缘之间没有间距。
• 效果：子元素均匀分布，两端对齐。

justify-content: space-between;

示例：

.container {
  display: flex;
  justify-content: space-between;
}

效果：

|1       2       3         |

5. space-around

• 含义：子元素均匀分布，每个子元素的两侧间距相等。
• 特点：子元素与容器边缘之间也会有间距，但两端的间距是子元素之间间距的一半。
• 效果：子元素分布均匀，且两端留有空白。

justify-content: space-around;

示例：

.container {
  display: flex;
  justify-content: space-around;
}

效果：

|  1    2    3             |

注意：两端的间距是子元素之间间距的一半。

6. space-evenly

• 含义：子元素均匀分布，每个子元素之间的间距与子元素和容器边缘的间距相等。
• 特点：子元素之间的间距完全一致，包括两端和子元素之间。
• 效果：子元素分布均匀，且两端的间距与子元素之间的间距完全一致。

justify-content: space-evenly;

示例：

.container {
  display: flex;
  justify-content: space-evenly;
}

效果：

|   1    2    3            |

7. start 和 end（CSS 逻辑属性）

• 含义：根据书写方向（LTR/RTL）对齐子元素。
• 特点：start 对齐到起始位置，end 对齐到结束位置。
• 效果：与 flex-start 和 flex-end 类似，但更适合国际化场景。

justify-content: start;
justify-content: end;

8. left 和 right（CSS 逻辑属性）

• 含义：强制子元素在主轴方向上靠左或靠右对齐。
• 特点：与 flex-start 和 flex-end 类似，但不受书写方向影响。

justify-content: left;
justify-content: right;

主轴方向的影响

justify-content 的效果取决于 主轴方向。主轴方向由 flex-direction 决定：

1. 默认主轴方向：row（水平，从左到右）
2. 垂直主轴方向：通过设置 flex-direction: column 改变为垂直方向。

例如：

.container {
  display: flex;
  flex-direction: column; /* 主轴改为垂直方向 */
  justify-content: center; /* 子元素在垂直方向上居中 */
}

对比总结

实际应用场景

1. flex-start：默认布局，常用于左对齐的场景。
2. flex-end：常用于右对齐的场景，比如按钮组。
3. center：常用于居中对齐的场景，比如导航栏、对话框按钮。
4. space-between：常用于子元素均匀分布且两端对齐的场景，比如导航菜单。
5. space-around：常用于子元素均匀分布且需要留白的场景，比如卡片布局。
6. space-evenly：常用于子元素完全均匀分布的场景，比如工具栏按钮。

通过灵活使用 justify-content，可以轻松实现各种布局需求！