7.1 属性 justify-content
Flexbox 提供了超棒的工具来管理元素对齐和分配 Flex 容器内的空间。这里的一个关键属性就是 justify-content，
它用来沿主轴对齐 Flex 元素。
属性 justify-content 决定了 Flex 元素如何沿着 Flex 容器的主轴分布。
主轴取决于属性 flex-direction: 的值。
- 如果
flex-direction的值是row或row-reverse，主轴是水平的 - 如果
flex-direction的值是column或column-reverse，主轴是垂直的
值：
flex-start: 元素对齐到容器的起始位置（默认值）flex-end: 元素对齐到容器的末端center: 元素在容器中居中对齐space-between: 元素均匀分布，之间有相同的间隔space-around: 元素均匀分布，边缘和之间有间隔space-evenly: 元素均匀分布，边缘和之间有相等的间隔
使用示例：
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
margin-bottom: 20px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.flex-start {
justify-content: flex-start;
}
HTML
<div class="container flex-start">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
7.2 justify-content 的值
1. flex-start
当 flex-start 时，元素对齐到 Flex 容器的起始位置，也就是如果主轴是水平的 (row)，则在左侧；如果主轴是垂直的 (column)，则在顶部。
使用示例：
CSS
.container {
display: flex;
justify-content: flex-start;
}
HTML
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
2. flex-end
当 flex-end 时，元素对齐到 Flex 容器的末端，也就是如果主轴是水平的 (row)，则在右侧；如果主轴是垂直的 (column)，则在底部。
使用示例：
CSS
.container {
display: flex;
justify-content: flex-end;
}
HTML
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
3. center
当 center 时，元素在 Flex 容器中居中对齐。这个值对创建居中布局非常有用。
使用示例：
CSS
.container {
display: flex;
justify-content: center;
}
HTML
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
4. space-between
当 space-between 时，元素沿主轴均匀分布，元素之间有相等的间隔。第一个元素对齐到容器的起始位置，最后一个元素对齐到容器的末端。
使用示例：
CSS
.container {
display: flex;
justify-content: space-between;
}
HTML
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
5. space-around
当 space-around 时，元素均匀分布，边缘和之间有间隔。元素之间的间隔是容器边缘间隔的两倍。
使用示例：
CSS
.container {
display: flex;
justify-content: space-around;
}
HTML
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
6. space-evenly
当 space-evenly 时，元素均匀分布，边缘和之间有相等的间隔。这个值确保整个容器内的间隔都是相等的。
使用示例：
CSS
.container {
display: flex;
justify-content: space-evenly;
}
HTML
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
7.3 菜单居中
真实项目中的使用示例 — 居中导航菜单：
CSS
.nav {
display: flex;
justify-content: center;
background-color: #333;
padding: 10px;
}
.nav-item {
color: white;
padding: 10px 20px;
text-decoration: none;
}
.nav-item:hover {
background-color: #575757;
}
HTML
<nav class="nav">
<a href="#" class="nav-item">主页</a>
<a href="#" class="nav-item">关于我们</a>
<a href="#" class="nav-item">服务</a>
<a href="#" class="nav-item">联系方式</a>
</nav>
代码解释：
.nav: 用于导航菜单的 Flex 容器，并居中对齐元素.nav-item: Flex 元素（链接）的基本样式
GO TO FULL VERSION