对齐项目 | justify-items
justify-items
属性为所有箱子定义了默认justify-self
,给出了在适当的轴上对每个框进行两端对齐的默认方法。
/* Basic keywords */
justify-items: auto;
justify-items: normal;
justify-items: stretch;
/* Positional alignment */
justify-items: center; /* Pack items around the center */
justify-items: start; /* Pack items from the start */
justify-items: end; /* Pack items from the end */
justify-items: flex-start; /* Pack flex items from the start */
justify-items: flex-end; /* Pack flex items from the end */
justify-items: self-start;
justify-items: self-end;
justify-items: left; /* Pack items from the left */
justify-items: right; /* Pack items from the right */
/* Baseline alignment */
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;
/* Overflow alignment (for positional alignment only) */
justify-items: safe center;
justify-items: unsafe center;
/* Legacy alignment */
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;
/* Global values */
justify-items: inherit;
justify-items: initial;
justify-items: unset;
语法
该属性可以采取四种不同的形式之一:
- 基本关键字:关键字值之一
normal
,auto
或stretch
。
- 基线对齐:
baseline
关键字,以及可选的一个first
或last
。
- 位置对准:一
center
,start
,end
,flex-start
,flex-end
,self-start
,self-end
,left
,或right
。另外可选safe
或unsafe
。
- 旧版对齐:
legacy
关键字,后跟一个left
或right
。
值
auto
使用的值是"父"框的justiy-items
属性的值,除非该框没有父级或绝对定位,在这些情况下,auto
表示正常.normal
此关键字的效果与我们所在的布局模式相关:
- 在块级布局中,关键字是一个同义词
start
。
- 在绝对定位的布局中, 关键字的表现就像在替换绝对定位的框上, 以及在所有其他绝对定位的框上。
- 在表格单元布局中,这个关键字没有意义,因为这个属性被忽略。
- 在flexbox布局中,此关键字没有意义,因为此属性被忽略。
- 在网格布局中,这个关键字会导致类似的行为
stretch
,除了具有宽高比的方框或其行为类似的内在尺寸外start
。
start
在适当的轴线上朝向对齐容器的起始边缘彼此齐平地包装。
end
在适当的轴线上朝向对齐容器的端部边缘彼此齐平地包装。
flex-start
根据柔性集装箱的主启动或交叉启动侧,物品朝向对齐容器的边缘彼此齐平。
这仅适用于柔性布局项目。对于不是弹性容器的子项的项目,这个值被视为像start
。
flex-end
根据柔性集装箱的主端或交叉端,物品朝向对齐容器的边缘彼此齐平地包装。
这仅适用于柔性布局项目。对于不是弹性容器的子项的项目,这个值被视为像end
。
self-start
物品在相应的轴上与物品开始侧的对齐容器边缘齐平。
self-end
物品与物品端侧的对齐容器的边缘齐平,并放置在相应的轴上。
center
物品朝向对齐容器的中心彼此齐平地包装。
left
物品朝向对齐容器的左边缘彼此齐平。如果属性的轴不与内联轴平行,则该值的行为如同start
。
right
物品在适当的轴线上朝向对齐容器的右边缘彼此齐平。如果属性的轴不与内联轴平行,则该值的行为如同start
。
baseline
first baseline
last baseline
指定参与首次或最后一次基线对齐:将框的第一个或最后一个基准集的对齐基线与基准线共享组中所有框的共享第一个或最后一个基准线集中的相应基线对齐。
first baseline
回退定位是start
,一只为last baseline
是end
。
stretch
如果物品的组合尺寸小于对齐容器的auto
尺寸,则任何尺寸的物品的尺寸均等(不成比例地增加),同时仍然考虑由max-height
/ max-width
(或等同的功能)施加的约束,使得组合的尺寸准确地填充对齐容器。
safe
如果项目的大小溢出对齐容器,则对齐项目就像对齐模式一样对齐start
。
unsafe
无论物品和对齐容器的相对大小如何,给定的对齐值都是可以接受的。
legacy
使框的后代继承的值。请注意,如果后代有一个justify-self: auto
值,那么legacy
关键字不被下降时,只有所考虑的left
,right
或center
与之相关联的值。
规范
Specification | Status | Comment |
---|---|---|
CSS Box Alignment ModuleThe definition of 'justify-items' in that specification. | Working Draft | Initial definition |
浏览器兼容性
Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 45 (45) | ? | ? | ? | ? | ? |
Feature | Firefox Mobile (Gecko) | Android | Android Webview | Edge | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | 45.0 (45) | ? | ? | ? | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com