justify-self

尝试一下

justify-self: stretch;

justify-self: center;

justify-self: start;

justify-self: end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">一</div>
    <div>二</div>
    <div>三</div>
  </div>
</section>

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

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

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

• 在块级布局中，它将项目在其包含块的行向轴上对齐。
• 对于绝对定位的元素，它将项目在其包含块的行向轴上对齐，同时考虑顶部、左侧、底部和右侧的偏移值。
• 在表格布局中，这个属性被忽略。了解更多关于区块、绝对定位以及表格布局中的对齐方式
• 在弹性布局中，这个属性被忽略。了解更多关于弹性布局中的对齐方式
• 在栅格布局中，它将项目在其网格区域内沿内联轴对齐。了解更多关于栅格布局中的对齐方式

语法

/* 基础关键字 */
justify-self: auto;
justify-self: normal;
justify-self: stretch;

/* 位置对齐 */
justify-self: center; /* 在中间放置元素 */
justify-self: start; /* 在开始处放置元素 */
justify-self: end; /* 在结束处放置元素 */
justify-self: flex-start; /* 与 'start' 等效。注意 justify-self 在 Flexbox 布局中被忽略。 */
justify-self: flex-end; /* 与 'end' 等效。注意 justify-self 在 Flexbox 布局中被忽略。 */
justify-self: self-start;
justify-self: self-end;
justify-self: left; /* 在左侧放置元素 */
justify-self: right; /* 在右侧放置元素 */

/* 基线对齐 */
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;

/* 溢出对齐（只对位置对齐有效果）*/
justify-self: safe center;
justify-self: unsafe center;

/* 全局值 */
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 相似。
• 在表格布局中，由于这个属性被忽略所以这个关键字没有作用。
• 在弹性布局中，由于这个属性被忽略所以这个关键字没有作用。
• 在栅格布局中，这个关键字会导致类似于 stretch 的行为，除了具有高宽比或固有大小的盒子，它的行为类似于 start 。

start

项目被放置到适当的轴上，朝向对齐容器的起始边缘，彼此齐平。

end

项目被放置到适当的轴上，朝向对齐容器的末端边缘，彼此齐平。

flex-start

对于非弹性容器子元素的项目，这个值被视为 start 。

flex-end

对于非弹性容器子元素的项目，这个值被视为 end.

self-start

The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.

self-end

The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.

center

项目被放置在对齐容器的中心向彼此平齐。

left

项目在对齐容器的左边缘，并彼此对齐。如果属性的轴与内联轴不平行，则此值的行为类似于start 。

right

项目在对齐容器的右边缘，并彼此对齐。如果属性的轴与内联轴不平行，则此值的行为类似于 start 。

baseline first baseline last baseline

Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for first baseline is start, the one for last baseline is end.

stretch

If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.

safe

If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.

unsafe

Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

形式定义

形式语法

justify-self = 
  auto                                                |
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  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    

示例

简单演示

In the following example we have a simple 2 x 2 grid layout. Initially the grid container is given a justify-items value of stretch — the default — which causes the grid items to stretch across the entire width of their cells.

The second, third, and fourth grid items are then given different values of justify-self, to show how these override the justify-items value. These values cause the grid items to span only as wide as their content width, and align in different positions across their cells.

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

article {
  margin: 20px;
}

结果

规范

浏览器兼容性

参见

• CSS Grid Guide: Box alignment in CSS Grid layouts
• CSS Box Alignment
• The justify-items property