justify-content

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

/* Positional alignment */
justify-content: center;     /* Pack items around the center */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end;   /* Pack flex items from the end */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

/* Baseline alignment */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* Distributed alignment */
justify-content: space-between; /* Distribute items evenly
                                   The first item is flush with the start,
                                   the last is flush with the end */
justify-content: space-around;  /* Distribute items evenly
                                   Items have a half-size space
                                   on either end */
justify-content: space-evenly;  /* Distribute items evenly
                                   Items have equal space around them */
justify-content: stretch;       /* Distribute items evenly
                                   Stretch 'auto'-sized items to fit
                                   the container */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

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

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

初始值	flex-start
适用于	柔性容器
遗传	没有
媒体	视觉
计算值	作为指定
动画类型	离散的
规范的顺序	形式语法定义的独特的非模糊顺序

语法

值

start从行首开始排列。每行第一个元素与行首对齐，同时所有后续的元素与前一个对齐。

这仅适用于柔性布局项目。对于不是弹性容器的子项的项目，这个值被视为像start。flex-end根据柔性容器的主端侧，物品朝向对齐容器的边缘彼此齐平地包装。

这仅适用于柔性布局项目。对于不是弹性容器的子项的项目，这个值被视为像end。

first baseline

last baseline指定参与首次或最后一次基线对齐：将框的第一个或最后一个基准集的对齐基线与基准线共享组中所有框的共享第一个或最后一个基准线集中的相应基线对齐。

回退定位first baseline是start，一只为last baseline是end。

形式语法

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

例

CSS内容

#container {
  display: flex;
  justify-content: space-between; /* Can be changed in the live sample */
}

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

结果

规范

Specification	Status	Comment
CSS Box Alignment Module Level 3The definition of 'justify-content' in that specification.	Working Draft	Adds the first \| last ? baseline, self-start, self-end, start, end, left, right, unsafe \| safe values.
CSS Flexible Box Layout ModuleThe definition of 'justify-content' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	21.0 -webkit 29.03	(Yes)-webkit (Yes)	18.0 (18.0)1 20.0 (20.0)2	11	12.10	9
space-evenly	No support	No support	52.0 (52.0)	No support	?	?
start, end	No support4	No support	(Yes)	No support	No support4	?
left, right	No support4	No support	52.0 (52.0)5	No support	No support4	?
baseline	57.0	No support	(Yes)	No support	44.0	?
first baseline, last baseline	No support	No support	52.0 (52.0)	No support	No support	?
stretch	57.0	No support	52.0 (52.0)	No support	44.0	?

Feature	Firefox Mobile (Gecko)	Android	Android Webview	Edge	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	?	?	(Yes)3	(Yes)-webkit (Yes)	No support	12.10	?	(Yes)3
space-evenly	52.0 (52.0)	No support	No support	No support	No support	No support	No support	No support
start, end	No support4	No support	(Yes)	No support	No support4	?
left, right	No support4	No support	52.0 (52.0)5	No support	?4	?
baseline	57.0	No support	(Yes)	No support	44.0	?
first baseline, last baseline	No support	No support	52.0 (52.0)	No support	No support	?
stretch	57.0	No support	52.0 (52.0)	No support	44.0	?