DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度！
justify-content 属性是 弹性盒布局模块 的子属性。
它定义了沿主轴的对齐方式。 它有助于分配当一行上的所有弹性项目都不可变，或者都是可变但已达到其最大大小时剩余的额外可用空间。 当项目溢出该行时，它也会对项目对齐施加一些控制。
justify-content 属性接受五个不同的值
flex-start（**默认**）：项目紧靠起始线排列flex-end：项目紧靠结束线排列center：项目沿线居中排列space-between：项目在线上均匀分布；第一个项目在起始线，最后一个项目在结束线space-around：项目在线上均匀分布，并在它们周围留有相等的空间space-evenly：项目分布使得任何两个相邻对齐主体之间、第一个对齐主体之前以及最后一个对齐主体之后的间距相同
下图有助于理解justify-content属性的实际作用
语法
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
.flex-item {
justify-content: center;
}演示
以下演示显示了弹性项目根据justify-content值的差异如何表现
- 红色列表设置为
flex-start - 黄色设置为
flex-end - 蓝色设置为
center - 绿色设置为
space-between - 粉色设置为
space-around - 浅绿色设置为
space-evenly
浏览器支持
这些浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器从该版本及更高版本开始支持该功能。
桌面
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 21* | 28 | 11 | 12 | 6.1* |
移动/平板电脑
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.4 | 7.0-7.1* |
Blackberry 浏览器 10+ 支持新语法。
截至我们最新的 2018 年 12 月更新，justify-content: space-evenly; 正在获得支持。有一个关于它的 工作草案规范。
这些浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器从该版本及更高版本开始支持该功能。
桌面
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 60 | 52 | 否 | 79 | 11 |
移动/平板电脑
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 11.0-11.2 |
有关如何混合语法以获得最佳浏览器支持的更多信息，请参阅我们的 “使用 Flexbox”文章。
更多信息
相关指南
相关技巧！
快速记住`justify-content`和`align-items`的区别
使用 CSS Grid 构建会议日程
居中：最新最酷的方式与最旧最酷的方式
在多方向网站中控制布局
网格元素大小调整的乐趣
请给我一些空间
相关
align-content
.element { align-content: space-around; }
align-items
.element { align-items: flex-start; }
align-self
.box { align-self: flex-end; }
display
.element { display: inline-block; }
flex-direction
.element { flex-direction: column-reverse; }
flex-flow
.element { flex-flow: row wrap; }
flex-wrap
.example { flex-wrap: wrap; }
justify-items
.element { justify-items: center; }
justify-self
.element { justify-self: stretch; }
place-content
place-items
.element { place-items: center; }
place-self
演示在 Safari 上显示不正确，包括桌面版和 iOS 版。你知道是什么原因吗？我已经尝试了所有不同的前缀和语法，但似乎都不起作用。
使用这个。
display: -webkit-flex; /* Safari /
-webkit-justify-content: space-around; / Safari 6.1+ */
display: flex;
justify-content: space-around;
我相信 Safari 或 iOS 都不支持 justify-content。我认为这篇文章实际上是在引用 flexbox 的支持，而不是它正在讨论的实际属性。
https://mdn.org.cn/en-US/docs/Web/CSS/justify-content#Browser_compatibility
我也刚刚测试了这一点
做一个测试
我发现 -webkit-box-pack 属性在 Safari/iOS 上的行为非常类似于 justify-content（至少在我的测试用例中）。请参阅 Safari 文档。
我想知道如何根据需要使 space-around 更小或更大……
@kuyseng 如果你指的是元素之间等间距但更紧凑，只需缩短容器或添加填充以将元素挤在一起。如果你指的是不等间距（例如，使前两个元素之间的间距比下一个间距窄），我会在元素之间添加空 div，并使用 flex-grow 属性来设置可用空间如何在间隙之间分配。你的 HTML 不会那么简洁，但它会给你很多控制权，例如，在第一个元素之前添加空格，但在最后一个元素之后不添加空格等。
在 Safari 上不起作用。
它在 WinJs 上根本不起作用。
为了更好地理解“display:flex”属性，请进一步查看此内容。我发现通过使用 CSS 编辑器玩游戏更容易理解。
http://flexboxfroggy.com/
你好！
我尝试在 Sublime Text 2 上使用“justify-content”，但似乎不起作用。
我是否需要升级我的 ST2，或者这根本不可能？
提前感谢。
只是我一个人觉得“justify”这个词在这里完全错误吗？在排版上下文中，“justified”文本是指调整文本，以便一行上的第一个和最后一个项目分别锚定在左侧和右侧，中间的项目均匀分布。
“space-between”和“space-around”属性可能会准确地显示其效果，但“flex-start”和“flex-end”属性与“justified”毫无关系。
当客户要求将复制内容“左对齐”时，实际上是指“左对齐”，这真的让我很烦。
只有我一个人这样吗？
我非常确定，截至今天（2017年8月4日），justify-content: space-evenly 尚未可用。它似乎在 Firefox 中有效；但是，我找不到任何明确说明这一点的内容。谁能确认一下？谢谢。
截至该日期，是的，你是对的。
它在 Chrome 中也有效。我使用的是 60.0.3112.90 版本，并且
justify-content: space-evenly工作正常。我也在使用 Chrome，并且
space-evenly效果很好。我希望其他浏览器很快也能支持它，因为在我的当前项目中，我更喜欢这种外观而不是space-around。space-evenly 目前在 iPhone 6 上的 Safari 中不起作用 :(
该选项不是 flex-item 的属性，而是 flex 容器的属性。
如果我们使用浮动定义一个 flex 备用方案，则包装元素上的
.clearfix可能很有必要。但是，通常的伪元素 clearfix 会导致justify-content: space-between声明出现问题，因为它会像一个额外的 flex 元素一样做出反应。即空间将分布不均。在这种情况下，我们必须手动分配空间（
margin-x: auto;）或使用其他 clearfix 方法，这可能会产生其他问题。还有其他解决方法吗？
我认为语法部分有点误导，因为`justify-content`是弹性容器（flex container）的属性，而不是弹性项目（flex-item）的属性，所以应该是
.flex-container {
justify-content: center;
}
而不是
.flex-item {
justify-content: center;
}
我正在尝试使用
justify-content获得与{align-items:stretch}相同的结果有什么方法可以安全地在所有设备上实现这一点吗？
理想情况下，我还需要能够覆盖例如
{justify-content: flext-start}。我一直在使用
{justify-content: stretch}，但结果参差不齐。这太让人沮丧了。`display:flex`和`justify-content`的效果不仅仅是沿着主轴对齐小项目，还包括沿着交叉轴进行换行。我找不到任何关于当项目换行时，为什么它们不会沿着交叉轴紧密排列在一起的信息！