1. Web
  2. CSS
  3. justify-items

justify-items

Baseline 广泛可用 *

此功能已相当成熟，可在多种设备和浏览器版本上使用。自 ⁨2016 年 7 月⁩起，所有浏览器均已支持此功能。

* 此特性的某些部分可能存在不同级别的支持。

CSS 的 justify-items 属性为容器盒中的所有项目定义了默认的 justify-self，从而为每个项目在相应轴向上的对齐方式提供了一种默认方法。

试一试

justify-items: stretch;

justify-items: center;

justify-items: start;

justify-items: end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

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

语法

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 之一。

值

normal

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

  • 在块级布局中，该关键字是 start 的同义词。
  • 在绝对定位布局中，该关键字在可替换的绝对定位盒上的行为类似于 start，在所有其他绝对定位盒上的行为类似于 stretch。
  • 在表格单元格布局中，此关键字没有意义，因为该属性被忽略。
  • 在 Flexbox 布局中，此关键字没有意义，因为该属性被忽略。
  • 在网格布局中，此关键字的行为类似于 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                                       |
  dialog                                              

<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 Box Alignment Module Level 3
# justify-items-property

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者们修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.