DevShelf

Appearance

place-self ​

描述 ​

place-self 属性将单元格内的网格布局元素沿网格容器的列轴和行轴对齐。它是 align-self 和 justify-self 属性的简写属性。 place-self 属性会覆盖使用 align-items、justify-items 属性或通用 place-items 属性为网格容器指定的特定元素的对齐值。目前，如果元素不是布局网格元素（不位于父元素内部，父元素是块元素或小写网格容器），则 place-self 属性不会对此类元素产生任何影响。

效果展示 ​

语法 ​

css
/* 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;

/* 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 。
    • 对于弹性项目，关键字的行为为 stretch 。
    • 对于网格项，此关键字会导致类似于 stretch 的行为，但具有长宽比或固有尺寸的框除外，其行为类似于 start 。
    • 该属性不适用于块级框和表格单元格。
  • self-start 将项目与横轴上项目起始侧对应的对齐容器边缘对齐。
  • self-end 将项目与横轴上项目端侧对应的对齐容器边缘齐平。
  • flex-start Flex 项目的交叉起始边距边缘与线的交叉起始边缘齐平。
  • flex-end 弹性项目的交叉端边距边缘与线的交叉端边缘齐平。
  • center Flex 项目的边距框位于横轴线上的中心。如果项目的横向尺寸大于弹性容器，则它将在两个方向上均匀溢出。
  • baseline, first baseline. last baseline 指定参与第一个或最后一个基线对齐：将框的第一个或最后一个基线集的对齐基线与其基线共享组中所有框的共享第一个或最后一个基线集中的相应基线对齐。 first baseline 的后备对齐方式是 start ， last baseline 的后备对齐方式是 end 。
  • stretch 如果沿交叉轴的项目的组合大小小于对齐容器的大小，并且项目的大小为 auto ，则其大小将等量增加（不按比例），同时仍然遵守所施加的约束通过 max-height / max-width （或等效功能），以便所有 auto 大小的项目的组合大小沿着横轴精确填充对齐容器。