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