place-self

place-self CSS 简写属性 允许您在块级和内联方向上同时对齐单个项目（即 align-self 和 justify-self 属性），在相关的布局系统中（例如 网格 或 Flexbox）。如果第二个值不存在，则第一个值也会用于第二个值。

试一试

构成属性

此属性是以下 CSS 属性的简写

语法

css
/* Positional alignment */
place-self: auto center;
place-self: normal start;
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: anchor-center;

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

值

auto

计算为父元素的 align-items 值。

normal

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

  • 在绝对定位的布局中，该关键字在替换的绝对定位盒子中表现为 start，而在所有其他绝对定位盒子中表现为 stretch。
  • 在绝对定位布局的静态位置中，该关键字表现为 stretch。
  • 对于 Flex 项目，该关键字表现为 stretch。
  • 对于网格项目，此关键字会导致类似于 stretch 的行为，除了具有 纵横比 或内在大小的盒子，在这种情况下它表现为 start。
  • 该属性不适用于块级盒子和表格单元格。
self-start

将项目对齐到与项目在交叉轴上的开始侧相对应的对齐容器边缘齐平。

self-end

将项目对齐到与项目在交叉轴上的结束侧相对应的对齐容器边缘齐平。

flex-start

Flex 项目的交叉开始外边距边缘与线的交叉开始边缘齐平。

flex-end

Flex 项目的交叉结束外边距边缘与线的交叉结束边缘齐平。

center

Flex 项目的外边距盒子在交叉轴上的线上居中。如果项目的交叉大小大于 Flex 容器，它将在两个方向上等量溢出。

baseline、first baseline、last baseline

指定参与第一个或最后一个基线对齐：将盒子的第一个或最后一个基线集的对齐基线与基线共享组中所有盒子的共享第一个或最后一个基线集中的对应基线对齐。first baseline 的回退对齐是 start，last baseline 的回退对齐是 end。

stretch

如果沿横轴排列的项目组合大小小于对齐容器的大小，并且项目是auto大小，则项目大小将相等地增加（而不是按比例增加），同时仍然尊重由max-height/max-width（或等效功能）施加的约束，以便所有auto大小的项目的组合大小恰好沿横轴填充对齐容器。

锚点居中

在锚点定位元素的情况下，将项目对齐到块和内联方向上关联的锚点元素的中心。参见使用anchor-center在锚点上居中。

正式定义

初始值作为简写中每个属性的
应用于块级框、绝对定位框和网格项目
继承否
计算值作为简写中每个属性的
  • align-self: auto在绝对定位元素上计算为自身，并在所有其他框上计算为父元素的align-items的计算值（减去任何旧版关键字），或者如果框没有父元素则为start。其行为取决于布局模型，如justify-self所述。否则为指定的值。
  • justify-self: 如指定
动画类型离散

正式语法

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

<align-self> = 
  auto                                  |
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  |
  anchor-center                         

<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和align-items值为stretch - 默认值 - 导致网格项目在整个单元格宽度上拉伸。

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

HTML

html
<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
  <span>Fourth</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: 80px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
}

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

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

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

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

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

结果

规范

规范
CSS 盒模型对齐模块级别 3
# place-self 属性

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见