1. Web
  2. CSS
  3. justify-self

justify-self

Baseline 广泛可用 *

此功能已非常成熟，可在多种设备和浏览器版本上使用。自 2017 年 10 月以来，它已在各大浏览器中可用。

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

CSS 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">One</div>
    <div>Two</div>
    <div>Three</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;
}

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

  • 在块级布局中，它将项目在其包含块的内联轴上对齐。
  • 对于绝对定位的元素，它将项目在其包含块的内联轴上对齐，同时考虑了 top、left、bottom 和 right 的偏移值。
  • 在表格单元格布局中，此属性被忽略。阅读更多关于块、绝对定位和表格布局中的对齐。
  • 在 Flexbox 布局中，此属性被忽略。阅读更多关于Flexbox 中的对齐。
  • 在 Grid 布局中，它将项目在其网格区域的内联轴上对齐。阅读更多关于Grid 布局中的对齐。

语法

css
/* 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 布局中，该关键字没有意义，因为此属性被忽略。
  • 在 Grid 布局中，该关键字的行为类似于 stretch，但对于具有宽高比或固有大小的盒子，其行为类似于 start。
start

项目沿着对齐容器在适当轴线上的起始边缘紧密排列。

end

项目沿着对齐容器在适当轴线上的结束边缘紧密排列。

flex-start

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

flex-end

对于不是 Flex 容器子项的项目，此值被视为 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

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

正式定义

初始值auto
应用于块级盒子、绝对定位盒子和网格项目
继承性否
计算值同指定值
动画类型离散

正式语法

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

示例

基本演示

在下面的示例中，我们有一个 2 x 2 的网格布局。最初，网格容器的 justify-items 值为 stretch——默认值——这使得网格项目横跨其单元格的整个宽度。

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

HTML

html
<article class="container">
  <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;
}

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

结果

规范

规范
CSS Box Alignment Module Level 3
# justify-self 属性

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

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

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