MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

CSS justify-content 属性定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。

当 length 属性和自动外边距属性(margin: auto)生效之后,对齐已经完成了。也就是说,如果存在至少一个弹性元素,而且这个元素的 flex-grow 属性不等于 0,那么对齐方式不会生效,就像没有多余空间的情况。 

这个属性未来可能不只会应用在单行元素上,所以不要单纯通过设置display属性来屏蔽它。CSSWG正在努力将其应用到任意块级元素上。相关草案目前仍处于其早期并且尚未被实现。

初始值flex-start
适用元素flex containers
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

可以参考 使用 CSS 弹性框获取更多信息。

语法

/* 从行首起始位置开始排列 */
justify-content: flex-start;

/* 从行尾位置开始排列 */
justify-content: flex-end;

/* 居中排列 */
justify-content: center;

/* 均匀排列每个元素
首个元素放置于起点,末尾元素放置于终点 */
justify-content: space-between;

/* 均匀排列每个元素
每个元素周围分配相同的空间 */
justify-content: space-around;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

flex-start
从行首开始排列。每行第一个弹性元素与行首对齐,同时所有后续的弹性元素与前一个对齐。
flex-end
从行尾开始排列。每行最后一个弹性元素与行尾对齐,其他元素将与后一个对齐。
center
伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
space-between
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐,每行最后一个元素与行尾对齐。
space-around
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

语法格式

flex-start | flex-end | center | space-between | space-around

例子

HTML 内容

<div id="container">
  <p>justify-content: flex-start</p>
  <div id="flex-start">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: flex-end</p>
  <div id="flex-end">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: center</p>
  <div id="center">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: space-between</p>
  <div id="space-between">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: space-around</p>
  <div id="space-around">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS

#container > div {
  display: flex;
  font-family: "Courier New", "Lucida Console", monospace;
}

#container > div > div {
  width: 50px;
  height: 50px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

#flex-start {
  justify-content: flex-start;
}

#center {
  justify-content: center;
}

#flex-end {
  justify-content: flex-end;
}

#space-between {
  justify-content: space-between;
}

#space-around {
  justify-content: space-around;
}

规范

规范 状态 备注
CSS Flexible Box Layout Module
justify-content
Candidate Recommendation 初始定义

浏览器兼容性

特性 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基础支持 18.0 (18.0) (behind a pref) [1]
20.0 (20.0)

21.0 -webkit
29.0 [2]

11 12.10 未实现
特性 Firefox Mobile (Gecko) Android Android Webview IE Phone Opera Mobile Safari Mobile
基础支持 ? ? (Yes) [2] 未实现 12.10 未实现

[1] 直到Firefox 28,Firefox都只支持单行弹性框。用户需要修改about:config,将“layout.css.flexbox.enabled”设置为“true”来在Firefox 18和19应用弹性框。

[2] Older versions of the spec treat absolute positioned children as though they are a 0 by 0 flex item. Later spec versions take them out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.

参考

文档标签和贡献者

 此页面的贡献者: dongyu.zhang, Ende93, jiahui, fscholz, Go7hic, Sebastianz, FredWe
 最后编辑者: dongyu.zhang,