CSS参考手册
框对齐 | Box Alignment
地方自我 | place-self
place-self属性同时设置justify-self属性和align-self属性。第一个值是justify-self属性值,第二个是align-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计算父级的align-items值。normal这个关键字的效果取决于我们所在的布局模式:
- 在绝对定位的布局中,关键字的行为类似于
start上取代绝对定位的盒子stretch上所有其他绝对定位的箱子。
- 在绝对定位布局的静态位置中,关键字表现为
stretch...
- 对于Flex项,关键字表现为
stretch...
- 对于网格项,此关键字将导致类似于
stretch,但具有高宽比或内部大小的盒子除外,在其中会表现为start.
- 该属性不适用于块级别框和表格单元格。
self-start将对齐的项目与横轴上对应项目起点的对齐容器的边缘对齐。
self-end将对齐的项目与横轴上对应于项目的端侧的对齐容器的边缘对齐。
flex-startFlex项目的交叉开始边缘边缘与线条的交叉起始边缘一起被刷新。
flex-endFlex项目的交叉边缘边缘与线条的交叉边缘齐平。
centerFlex项目的边距框在交叉轴线上居中。如果物品的交叉尺寸大于柔性容器,则它将在两个方向上均等地溢出。
baseline
first baseline
last baseline指定参与首次或最后一次基线对齐:将框的第一个或最后一个基准集的对齐基线与基准线共享组中所有框的共享第一个或最后一个基准线集中的相应基线对齐。
回退定位first baseline是start,一只为last baseline是end。
stretch如果沿着横轴的物品的组合尺寸小于对齐容器的auto尺寸并且物品是大小的,则它的尺寸被同等地(不成比例地)增加,同时仍然考虑由max-height/ max-width(或者等同的功能)施加的约束,以便所有auto尺寸的物品的组合尺寸正好沿横轴填充对齐容器。
规格
Specification |
Status |
Comment |
|---|---|---|
CSS Box Alignment ModuleThe definition of 'place-self' in that specification. |
Working Draft |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
|---|---|---|---|---|---|---|
Basic support |
59 |
? |
45.0 (45.0) |
? |
? |
No support |
Feature |
Android Webview |
Chrome for Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
|---|---|---|---|---|---|---|---|
Basic support |
59 |
59 |
? |
(Yes) |
? |
No support |
? |
框对齐 | Box Alignment相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
加载中,请稍侯......