翻译正在进行中。

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

/* Positional alignment */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-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;  /* 均匀排列每个元素
                                   首个元素放置于起点,末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly;  /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
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
适用元素flex containers
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar
 

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

语法

start
从行首开始排列。每行第一个元素与行首对齐,同时所有后续的元素与前一个对齐。(话说翻译居然不用审核?)
flex-start
从行首开始排列。每行第一个弹性元素与行首对齐,同时所有后续的弹性元素与前一个对齐。
flex-end
从行尾开始排列。每行最后一个弹性元素与行尾对齐,其他元素将与后一个对齐。
center
伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
left
The items are packed flush to each other toward the left edge of the alignment container. If the property’s axis is not parallel with the inline axis, this value behaves like start.
right
The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property’s axis is not parallel with the inline axis, this value behaves like start.
baseline
first baseline

last baseline
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
The fallback alignment for first baseline is start, the one for last baseline is end.
space-between
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐,每行最后一个元素与行尾对齐。
space-around
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
space-evenly
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
stretch
If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.
safe
If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.
unsafe
Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

语法格式

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

示例

CSS content

#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);
}

Result

规范

Specification Status Comment
CSS Box Alignment Module Level 3
justify-content
Working Draft Adds the [ first | last ]? baseline, self-start, self-end, start, end, left, right, unsafe | safe values.
CSS Flexible Box Layout Module
justify-content
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 21.0 -webkit
29.0[3]
(Yes)-webkit
(Yes)
18.0 (18.0)[1]
20.0 (20.0)[2]
11 12.10 9
space-evenly 未实现 未实现 52.0 (52.0) 未实现 ? ?
start, end 未实现[4] 未实现 (Yes) 未实现 未实现[4] ?
left, right 未实现[4] 未实现 52.0 (52.0)[5] 未实现 未实现[4] ?
baseline 57.0 未实现 (Yes) 未实现 44.0 ?
first baseline, last baseline 未实现 未实现 52.0 (52.0) 未实现 未实现 ?
stretch 57.0 未实现 52.0 (52.0) 未实现 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)
未实现 12.10 ? (Yes)[3]
space-evenly 52.0 (52.0) 未实现 未实现 未实现 未实现 未实现 未实现 未实现
start, end 未实现[4] 未实现 (Yes) 未实现 未实现[4] ?
left, right 未实现[4] 未实现 52.0 (52.0)[5] 未实现 ?[4] ?
baseline 57.0 未实现 (Yes) 未实现 44.0 ?
first baseline, last baseline 未实现 未实现 52.0 (52.0) 未实现 未实现 ?
stretch 57.0 未实现 52.0 (52.0) 未实现 44.0 ?

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

参考

文档标签和贡献者

 最后编辑者: vidahaha,