证明自我 | justify-self
CSS justify-self
属性限定了沿着相应的轴证明其容器内的盒的方式。
/* Basic keywords */
justify-self: auto;
justify-self: normal;
justify-self: stretch;
/* Positional alignment */
justify-self: center; /* Pack item around the center */
justify-self: start; /* Pack item from the start */
justify-self: end; /* Pack item from the end */
justify-self: flex-start; /* Pack flex item from the start */
justify-self: flex-end; /* Pack flex item from the end */
justify-self: self-start;
justify-self: self-end;
justify-self: left; /* Pack item from the left */
justify-self: right; /* Pack item from the right */
/* Baseline alignment */
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;
/* Overflow alignment (for positional alignment only) */
justify-self: safe center;
justify-self: unsafe center;
/* Global values */
justify-self: inherit;
justify-self: initial;
justify-self: unset;
语法
这个属性可以采取三种不同的形式之一:
- 基本关键字:关键字值之一
normal
,auto
或stretch
。 - 基线对齐:
baseline
关键字,以及可选的一个first
或last
。 - 位置对齐:
- :一
center
,start
,end
,flex-start
,flex-end
,self-start
,self-end
,left
,或right
。 - 加上可选
safe
或unsafe
。
- :一
值
auto
使用的值是值justify-items
父母箱的财产,除非框中有没有父母,或绝对定位,在这些情况下,auto
代表normal
。
normal
此关键字的效果取决于我们所处的布局模式:
- 在块级布局中,关键字是一个同义词
start
。 - 在绝对定位的布局中,关键字的行为就像
start
在被替换的绝对定位框上,以及stretch
在所有其他绝对定位的框上一样。 - 在表格单元格布局中,此关键字没有意义,因为此属性被忽略。
- 在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
无论物品和对齐容器的相对大小如何,给定的对齐值都会得到遵守。
规范
Specification | Status | Comment |
---|---|---|
CSS Box Alignment ModuleThe definition of 'justify-self' 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