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从行首开始排列。每行第一个元素与行首对齐，同时所有后续的元素与前一个对齐。

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

flex-end从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。

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

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

center这些物品沿着主轴朝向对齐容器的中心彼此齐平地包装。

left物品朝向对齐容器的左边缘彼此齐平。如果属性的轴不与内联轴平行，则该值的行为如同start。

right物品在适当的轴线上朝向对齐容器的右边缘彼此齐平。如果属性的轴不与内联轴平行，则该值的行为如同start。

baseline

first baseline

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

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

space-between物品沿主轴均匀分布在对齐容器内。每一对相邻物品之间的间隔是相同的。第一个项目与主起始边缘齐平，最后一个项目与主端边缘齐平。

space-around物品沿主轴均匀分布在对齐容器内。每一对相邻物品之间的间隔是相同的。第一个和最后一个项目之前的空白空间等于每一对相邻项目之间的空间的一半。

space-evenly物品沿主轴均匀分布在对齐容器内。每一对相邻的项目，主起始边缘和第一项目，以及主要边缘和最后项目之间的间隔都完全相同。

stretch如果物品的组合尺寸小于对齐容器的auto尺寸，则任何尺寸的物品的尺寸均等地增加（不成比例），同时仍然考虑由max-height/ max-width（或等同的功能）施加的约束，使得组合的尺寸沿主轴正好填充对齐容器。

safe如果项目的大小溢出对齐容器，则对齐项目就像对齐模式一样对齐start。

unsafe无论物品和对齐容器的相对大小如何，给定的对齐值都是可以接受的。

形式语法

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	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18