place-self
CSS
shorthand property
allows you to align an individual item in both the block and inline directions at once (i.e. the
align-self
and
justify-self
properties) in a relevant layout system such as
Grid
or
Flexbox
. If the second value is not present, the first value is also used for it.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
此特性是下列 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; 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
on
replaced
absolutely-positioned boxes, and as
stretch
on
all other
absolutely-positioned boxes.
stretch
.
stretch
.
stretch
, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like
start
.
self-start
Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.
self-end
Aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis.
flex-start
The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
flex-end
The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
center
The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.
baseline
first baseline
last baseline
first baseline
is
start
, the one for
last baseline
is
end
.
stretch
auto
-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by
max-height
/
max-width
(or equivalent functionality), so that the combined size of all
auto
-sized items exactly fills the alignment container along the cross axis.
| 初始值 |
as each of the properties of the shorthand:
|
|---|---|
| 适用于 | block-level boxes, absolutely-positioned boxes, and grid items |
| 继承 | no |
| 计算值 |
as each of the properties of the shorthand:
|
| 动画类型 | discrete |
<'align-self'> <'justify-self'>?
In the following example we have a simple 2 x 2 grid layout. Initially the grid container has
justify-items
and
align-items
values of
stretch
— the defaults — which causes the grid items to stretch across the entire width of their cells.
The second, third, and fourth grid items are then given different values of
place-self
, to show how these override the default placements. These values cause the grid items to span only as wide/tall as their content width/height, and align in different positions across their cells, in the block and inline directions.
<article class="container"> <span>First</span> <span>Second</span> <span>Third</span> <span>Fourth</span> </article>
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;
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;
}
article {
margin: 20px;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Box Alignment Module Level 3
The definition of 'place-self' in that specification. |
工作草案 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Supported in Flex Layout | Chrome 完整支持 59 | Edge 完整支持 79 | Firefox 完整支持 45 | IE 不支持 No | Opera 完整支持 46 | Safari 完整支持 11 | WebView Android 完整支持 59 | Chrome Android 完整支持 59 | Firefox Android 完整支持 45 | Opera Android 完整支持 43 | Safari iOS 完整支持 11 | Samsung Internet Android 完整支持 7.0 |
| Supported in Grid Layout | Chrome 完整支持 59 | Edge 完整支持 79 | Firefox 完整支持 45 | IE 不支持 No | Opera 完整支持 46 | Safari 不支持 No | WebView Android 完整支持 59 | Chrome Android 完整支持 59 | Firefox Android 完整支持 45 | Opera Android 完整支持 43 | Safari iOS 不支持 No | Samsung Internet Android 完整支持 7.0 |
完整支持
不支持
align-self
property
justify-self
property