CSS Flexbox 是一种现代化的布局方式，可以灵活地创建响应式布局。在 CSS Flexbox 中，justify-content 属性可以控制项目的水平对齐方式，它有很多取值，常见的如 flex-start、flex-end、center、space-between 和 space-around 等，本文将深入讲解这些取值的用途、实现方法以及适用场景。
justify-content: flex-start
flex-start 是默认值，如果没有设置 justify-content 属性，项目就会默认对齐在容器的左侧。下面是一个示例代码：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ----------- - ----- - ------ ------ ------- ------ ----------------- ---- ------------- ----- -
以上代码中，.container 是容器元素，设置了 display: flex，.item 是容器内的项目。运行样例代码会发现，项目都靠左对齐并排排列。
justify-content: flex-end
flex-end 顾名思义是把项目对齐到容器的右侧。下面是一个示例代码：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- --------- - ----- - ------ ------ ------- ------ ----------------- ---- ------------- ----- -
以上代码中，.container 是容器元素，设置了 display: flex，.item 是容器内的项目。运行样例代码会发现，项目都靠右对齐并排排列。
justify-content: center
center 把容器内的项目居中对齐。下面是一个示例代码：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- - ----- - ------ ------ ------- ------ ----------------- ---- ------------- ----- -
以上代码中，.container 是容器元素，设置了 display: flex，.item 是容器内的项目。运行样例代码会发现，项目都在容器内居中排列。
justify-content: space-between
space-between 把项目平均分配到容器内，并保证它们之间的空白间隔相等。下面是一个示例代码：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - ----- - ------ ------ ------- ------ ----------------- ---- ------------- ----- -
以上代码中，.container 是容器元素，设置了 display: flex，.item 是容器内的项目。运行样例代码会发现，项目被平均分配到了容器内，并且它们之间的距离相等。
justify-content: space-around
space-around 也是把项目平均分配到容器内，但该属性会在项目的左侧和右侧留有一定的空白间隔。下面是一个示例代码：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------------- - ----- - ------ ------ ------- ------ ----------------- ---- ------------- ----- -
以上代码中，.container 是容器元素，设置了 display: flex，.item 是容器内的项目。运行样例代码会发现，项目被平均分配到了容器内，并且它们左右两侧的距离相等。
总结
justify-content 属性是 CSS Flexbox 布局中非常重要的属性之一，它控制了项目的水平对齐方式，其取值包括 flex-start、flex-end、center、space-between 和 space-around 等。要熟练掌握 CSS Flexbox 布局，必须深入学习 justify-content 属性的用法、实现方法以及适用场景，只有掌握了各种情况下的最佳实践，才能灵活运用并创造出精美的响应式布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d2ebe80869a45d40624032