place-self | CSS-Tricks

CSS 年鉴 → 属性 → P → place-self

Marcel Rojas on 2021 年 3 月 4 日

CSS 中的 place-self 属性是 align-self 和 justify-self 属性的简写形式，将它们组合到 CSS 网格和 Flexbox 布局中的单个声明中，其中 align-self 和 justify-self（仅限 CSS 网格）是将单个项目在块方向和内联方向上对齐的值。

.element {
  place-self: center start;
}

该属性包含在 CSS 盒子对齐模块级别 3 规范中，它被称为“自对齐简写”。这是一个很棒的昵称，因为它确实允许元素与其父元素和组中其他元素的对齐方式明显不同地对齐自身，并且通过将两个属性组合到单个声明中来实现。

语法

place-self: <'align-self'> <'justify-self'>?

初始值： auto
应用于： 块级盒子、绝对定位的盒子和网格项目。
继承： 否
计算值： 作为简写形式的每个属性：align-self 和 justify-self
动画类型： 离散

值

/* Keyword values */
place-self: auto center;
place-self: normal start;

/* Positional alignment */
place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;
place-self: left auto;
place-self: right normal;

/* Baseline alignment */
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;

/* Global values */
place-self: inherit;
place-self: initial;
place-self: unset;

关键字值

auto: 这将返回父容器的 justify-items 属性提供的值。如果元素没有父容器，则返回 normal。
normal: 此值的运行方式取决于当前的布局模式
- 在绝对定位布局中，关键字在替换绝对定位的盒子上表现得像 start。在所有其他绝对定位的盒子上，它表现得像 stretch 值。
- 在绝对定位布局的静态位置中，关键字的行为类似于 stretch 值。
- 对于 flex 项目，关键字的行为与 stretch 相同。
- 对于网格项目，此关键字会导致类似于 stretch 的行为，但对于具有纵横比或内在大小的盒子除外 - 在这些情况下，它表现得像 start。
- 该属性根本不适用于块级盒子或表格单元格。

位置对齐

self-start: 这将元素与容器的起始边对齐。
self-end: 这将元素与容器的结束边对齐。
flex-start: 这在 flex 布局中使用，其中元素与容器的起始边对齐
flex-end: 这在 flex 布局中使用，其中元素与容器的结束边对齐
center: 这将元素在其容器内居中。
left: 这将元素与容器的左边对齐。
right: 这将元素与容器的右边对齐。

基线对齐

baseline: 这通过将元素的对齐基线与组的对齐基线匹配来对齐组内的元素（即行内的单元格）。如果单独使用 baseline，则默认为 first。
first baseline: 这将盒子的第一个基线集的对齐基线与基线共享组中所有盒子的共享第一个基线集中相应的基线对齐。回退对齐方式为 start。
last baseline: 这将盒子的最后一个基线集的对齐基线与基线共享组中所有盒子的共享最后一个基线集中相应的基线对齐。回退对齐方式为 end。
stretch: 用于在两个轴上拉伸项目，同时仍尊重 max-height 和 max-width 属性（或等效功能）施加的约束。

两个属性，一个声明

这就是 CSS 中简写属性的优势所在。与分别写出 align-self 和 justify-self 不同

.item {
  display: grid;
  align-self: start;
  justify-self: center;
}

…我们可以简单地声明 place-self，它接受这两个值

.item {
  display: grid;
  place-self: start center;
}

如果只提供一个值，则它会设置两个属性。例如，这

.item {
  display: grid;
  place-self: start;
}

与写这个是一样的

.item {
  display: grid;
  align-self: start;
  justify-self: start;
}

在 Flexbox 中没有 `justify-self`

Flexbox 忽略 justify-self 属性，因为 justify-content 属性已经控制了如何使用多余的空间。换句话说，Flex 容器已经计算了排列其项目所需的空间。一旦项目被放置，任何剩余的多余空间都由 justify-content 处理。并且由于 justify-self 作用于 Flex 容器的单个项目，因此实际上并不需要它——作用于 Flex 容器的 justify-content 属性已经涵盖了它。

换句话说，当我们处理 Flexbox 时，justify-self 是不可行的。是的，它有点奇怪，但也是您在进入 Flexbox 时需要了解的事情之一。

现在，无论我们是在谈论块方向还是内联方向，完全取决于元素的 direction、writing-mode 和 text-orientation。如果是从左到右，比如英语，那么我们指的是块（垂直）方向。如果是垂直的，那么我们指的是内联（水平）方向。 Chris 更详细地解释了逻辑属性，值得查看以了解更多信息。