引言
CSS Flexbox 是一个用于布局的 CSS 模块，它可以让我们更容易地管理灵活的容器和项目，并支持不同的排列方式，其中 justify-content 是其中一个关键的属性。本文将详细介绍 justify-content 属性的各种取值及应用技巧，并附带具体示例代码。
justify-content 属性简介
justify-content 属性的作用是定义 flex 容器中 flex 项目在主轴方向上的对齐方式。主轴方向是 flex 容器的主要方向，可以设置为水平或垂直方向。justify-content 支持以下取值：
- flex-start：将所有 flex 项目在主轴方向上对齐到 flex 容器的起始边；
- flex-end：将所有 flex 项目在主轴方向上对齐到 flex 容器的结束边；
- center：将所有 flex 项目在主轴方向上居中对齐；
- space-between：将 flex 容器分配给所有 flex 项目相等的间隔，所有项目之间的间距相等。第一项位于起始边缘，最后一项位于结束边缘；
- space-around：将 flex 容器分配给所有 flex 项目相等的间隔，所有项目之间的间距相等。项目周围的间隔是项目之间间隔的一半；
- space-evenly：将 flex 容器分配给所有 flex 项目相等的间隔，包括项目与容器之间的间隔和项目之间的间隔。
justify-content 取值示例
下面是五个取值的示例，每个示例都使用了一个包含五个相同尺寸项目的容器。
flex-start
该示例将所有项目都对齐到 flex 容器的起始边。
<div class="container start"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ ------ ----- ----------------- -------- ------- --- ----- ----- - ------ - ---------------- ----------- - ----- - ------- ----- ------ ----- ----------------- -------- ------------- ----- -
flex-end
该示例将所有项目都对齐到 flex 容器的结束边。
<div class="container end"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ ------ ----- ----------------- -------- ------- --- ----- ----- - ---- - ---------------- --------- - ----- - ------- ----- ------ ----- ----------------- -------- ------------- ----- -
center
该示例将所有项目都居中对齐。
<div class="container center"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ ------ ----- ----------------- -------- ------- --- ----- ----- - ------- - ---------------- ------- - ----- - ------- ----- ------ ----- ----------------- -------- ------------- ----- -
space-between
该示例将 flex 容器分配给所有项目相等的间隔，所有项目之间的间距相等。第一项位于起始边缘，最后一项位于结束边缘。
<div class="container between"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ ------ ----- ----------------- -------- ------- --- ----- ----- - -------- - ---------------- -------------- - ----- - ------- ----- ------ ----- ----------------- -------- ------------- ----- -
space-around
该示例将 flex 容器分配给所有项目相等的间隔，所有项目之间的间距相等。项目周围的间隔是项目之间间隔的一半。
<div class="container around"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ ------ ----- ----------------- -------- ------- --- ----- ----- - ------- - ---------------- ------------- - ----- - ------- ----- ------ ----- ----------------- -------- ------------- ----- -
space-evenly
该示例将 flex 容器分配给所有项目相等的间隔，包括项目与容器之间的间隔和项目之间的间隔。
<div class="container evenly"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ ------ ----- ----------------- -------- ------- --- ----- ----- - ------- - ---------------- ------------- - ----- - ------- ----- ------ ----- ----------------- -------- ------------- ----- -
应用技巧
除了上述基本的取值，justify-content 还有一些高级的用法，这里我们简单介绍一下。
分流与集中
在布局的应用中，我们有时候需要把容器中的项目分散到两个不同的方向。比如说，我们想要在左侧放置一个 logo，而在右侧放置一段文字。这种情况下可以使用两个 flex 容器加上两个组件，然后把两个 flex 容器通过 justify-content 分别定位到左边和右边。
<div class="container direction">
<div class="logo-container">
<img src="./logo.png" alt="logo">
</div>
<div class="text-container">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ ------ ----- ----------------- -------- ------- --- ----- ----- - ---------- - ---------------- -------------- - --------------- - -------- ----- ------------ ------- - --------------- - -------- ----- ------------ ------- -
等比拉伸
除了上述常见的布局，justify-content 在处理大面积布局是可以“等比拉伸”项目的。具体可以将 justify-content 设为 space-between 或 space-around，并把自己的宽度设为 0。
<div class="container spread"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ ------ ----- ----------------- -------- ------- --- ----- ----- - ------- - ---------------- ------------- - ----- - ------- ----- ----------------- -------- ------ -- ----- -- ------- - ----- -
结论
justify-content 是 flexbox 的重要属性之一，它可以用来定义 flex 容器中 flex 项目在主轴方向上的对齐方式。本文对 justify-content 的六种常用取值进行了详细介绍，并进一步讲解了 justify-content 的高级用法。本文的示例代码和技巧均适用于前端开发领域的实际应用，值得大家参考学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67025c6cd91dce0dc8473749