对齐项目 | 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)	?	?	?	?	?	?	?