justify-self

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

• 在块级布局中，它在内联轴线上将项目与其包含块对齐。
• 对于绝对定位的元素，它在内联轴线上将项目与其包含块对齐，并考虑顶部、左侧、底部和右侧的偏移值。
• 在表格单元格布局中，此属性被忽略。详细了解块级、绝对定位和表格布局中的对齐.
• 在 flexbox 布局中，此属性被忽略。详细了解flexbox 中的对齐.
• 在网格布局中，它在内联轴线上将项目与其网格区域对齐。详细了解网格布局中的对齐.

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

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

对于不是 flex 容器子级的项目，此值被视为 start。

flex-end

对于不是 flex 容器子级的项目，此值被视为 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（或等效功能）强加的约束，以便组合大小正好填满对齐容器。

anchor-center

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

safe

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

unsafe

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

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

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

<overflow-position> = 
  unsafe  |
  safe    

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

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

然后，第二个、第三个和第四个网格项目被赋予不同的justify-self值，以显示这些值如何覆盖justify-items值。这些值会导致网格项目仅跨越其内容宽度，并在其单元格中不同的位置对齐。

HTML

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

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;
}

span:nth-child(2) {
  justify-self: start;
}

span:nth-child(3) {
  justify-self: center;
}

span:nth-child(4) {
  justify-self: end;
}

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

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

结果

• justify-items
• CSS 网格布局中的框对齐
• CSS 框对齐 模块