justify-items

**justify-items** 属性定义了框中所有项目的默认 justify-self，为它们提供了一种在适当轴上对齐每个框的默认方法。

尝试一下

此属性的效果取决于我们所处的布局模式。

  • 在块级布局中，它将包含块内的项目沿内联轴对齐。
  • 对于绝对定位的元素，它将包含块内的项目沿内联轴对齐，并考虑 top、left、bottom 和 right 的偏移量。
  • 在表格单元格布局中，此属性将被 *忽略* (更多 关于块、绝对定位和表格布局中的对齐方式)
  • 在弹性盒布局中，此属性将被 *忽略* (更多 关于弹性盒布局中的对齐方式)
  • 在网格布局中，它将网格区域内的项目沿内联轴对齐 (更多 关于网格布局中的对齐方式)

语法

css
/* Basic keywords */
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; /* Equivalent to 'start'. Note that justify-items is ignored in flexbox layouts. */
justify-items: flex-end; /* Equivalent to 'end'. Note that justify-items is ignored in flexbox layouts. */
justify-items: self-start;
justify-items: self-end;
justify-items: left; /* Pack items from the left */
justify-items: right; /* Pack items from the right */
justify-items: anchor-center;

/* 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: revert;
justify-items: revert-layer;
justify-items: unset;

此属性可以采用四种不同的形式

  • 基本关键字：normal 或 stretch 之一。
  • 基线对齐：baseline 关键字，可选地加上 first 或 last 之一。
  • 位置对齐：center、start、end、flex-start、flex-end、self-start、self-end、left 或 right 之一。可选地加上 safe 或 unsafe。
  • 传统对齐：legacy 关键字，后跟 left 或 right 之一。

Values

normal

此关键字的效果取决于我们所处的布局模式。

  • 在块级布局中，该关键字是 start 的同义词。
  • 在绝对定位的布局中，该关键字在 *替换* 的绝对定位框上表现得像 start，而在 *其他所有* 绝对定位的框上表现得像 stretch。
  • 在表格单元格布局中，此关键字没有意义，因为此属性被 *忽略*。
  • 在弹性盒布局中，此关键字没有意义，因为此属性被 *忽略*。
  • 在网格布局中，此关键字会导致与 stretch 相似的行为，但对于具有纵横比或内在大小的框，它表现得像 start。
start

该项目在适当轴上的对齐容器的起始边缘方向上彼此紧贴。

end

该项目在适当轴上的对齐容器的结束边缘方向上彼此紧贴。

flex-start

对于不是弹性容器子元素的元素，此值将被视为start。

flex-end

对于不是弹性容器子元素的元素，此值将被视为end。

self-start

该项目在适当的轴线上紧贴对齐容器的项目起始侧边缘。

self-end

该项目在适当的轴线上紧贴对齐容器的项目结束侧边缘。

center

项目彼此紧贴，朝向对齐容器的中心。

left

项目彼此紧贴，朝向对齐容器的左侧边缘。如果属性的轴线与内联轴线不平行，此值的行为将类似于start。

项目彼此紧贴，在适当的轴线上朝向对齐容器的右侧边缘。如果属性的轴线与内联轴线不平行，此值的行为将类似于start。

baseline，first baseline，last baseline

指定参与首行或末行对齐：将框的首行或末行基线集的对齐基线与基线共享组中所有框的共享首行或末行基线集中的相应基线对齐。first baseline的回退对齐方式为start，last baseline的回退对齐方式为end。

stretch

如果项目的组合大小小于对齐容器的大小，任何auto大小的项目都会在大小上等量增加（而不是按比例增加），同时仍然遵守由max-height/max-width（或等效功能）施加的约束，以使组合大小正好填满对齐容器。

anchor-center

对于锚点定位元素，将项目沿内联方向对齐到关联锚点元素的中心。请参见使用anchor-center在锚点上居中。

safe

如果项目的大小超过对齐容器，则该项目将像对齐模式为start一样对齐。

unsafe

无论项目和对齐容器的相对大小如何，都会遵守给定的对齐值。

legacy

使框后代继承该值。请注意，如果后代具有justify-self: auto值，则后代不会考虑legacy关键字，只考虑与其关联的left、right或center值。

正式定义

初始值legacy
应用于所有元素
继承否
计算值如指定
动画类型离散

正式语法

justify-items = 
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  legacy                                              |
  legacy && [ left | right | center ]                 |
  anchor-center                                       

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

示例

简单演示

在下面的示例中，我们有一个简单的 2x2 网格布局。最初，网格容器被赋予justify-items值为stretch（默认值），这会导致网格项目在单元格的整个宽度上拉伸。

但是，如果将鼠标悬停在网格容器上或按 Tab 键进入网格容器，则它将被赋予justify-items值为center，这会导致网格项目只跨越其内容宽度，并在单元格的中心对齐。

HTML

html
<article class="container" tabindex="0">
  <span>First child</span>
  <span>Second child</span>
  <span>Third child</span>
  <span>Fourth child</span>
</article>

CSS

css
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
  justify-items: stretch;
}

article:hover,
article:focus {
  justify-items: center;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

结果

规范

规范
CSS 盒子对齐模块 Level 3
# justify-items-property

浏览器兼容性

BCD 表格只在启用了 JavaScript 的浏览器中加载。

另请参阅