justify-content

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

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

可以参考使用 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;
}

规范

浏览器兼容性

[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.

参考

• 使用CSS弹性元素