证明自我 | justify-self (Box Alignment) - CSS 中文开发手册 - Break易站
证明自我 | justify-self (Box Alignment) - CSS 中文开发手册
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) | ? | ? | ? | ? | ? | ? | ? |
