CSS
place-items
shorthand property
allows you to align items along both the block and inline directions at once (i.e. the
align-items
and
justify-items
properties) in a relevant layout system such as
Grid
or
Flexbox
. If the second value is not set, 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-items: auto center; place-items: normal start; /* Positional alignment */ place-items: center normal; place-items: start auto; place-items: end normal; place-items: self-start auto; place-items: self-end normal; place-items: flex-start auto; place-items: flex-end normal; place-items: left auto; place-items: right normal; /* Baseline alignment */ place-items: baseline normal; place-items: first baseline auto; place-items: last baseline normal; place-items: stretch auto; /* Global values */ place-items: inherit; place-items: initial; place-items: unset;
auto
justify-items
property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases,
auto
represents
normal
.
normal
start
.
start
on
replaced
absolutely-positioned boxes, and as
stretch
on
all other
absolutely-positioned boxes.
stretch
, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like
start
.
start
The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.
end
The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.
flex-start
start
.
flex-end
end
.
self-start
The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
self-end
The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
center
The items are packed flush to each other toward the center of the of the alignment container.
left
start
.
right
start
.
baseline
first baseline
last baseline
first baseline
is
start
, the one for
last baseline
is
end
.
stretch
auto
-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by
max-height
/
max-width
(or equivalent functionality), so that the combined size exactly fills the alignment container.
| 初始值 |
as each of the properties of the shorthand:
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | no |
| 计算值 |
as each of the properties of the shorthand:
|
| 动画类型 | discrete |
<'align-items'> <'justify-items'>?
div > div {
box-sizing: border-box;
border: 2px solid #8c8c8c;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#item1 {
background-color: #8cffa0;
min-height: 30px;
}
#item2 {
background-color: #a0c8ff;
min-height: 50px;
}
#item3 {
background-color: #ffa08c;
min-height: 40px;
}
#item4 {
background-color: #ffff8c;
min-height: 60px;
}
#item5 {
background-color: #ff8cff;
min-height: 70px;
}
#item6 {
background-color: #8cffff;
min-height: 50px;
font-size: 30px;
}
select {
font-size: 16px;
}
.row {
margin-top: 10px;
}
<div id="container" class="flex">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
<div id="item4">4</div>
<div id="item5">5</div>
<div id="item6">6</div>
</div>
<div class="row">
<label for="display">display: </label>
<select id="display">
<option value="flex">flex</option>
<option value="grid">grid</option>
</select>
</div>
<div class="row">
<label for="values">place-items: </label>
<select id="values">
<option value="start">start</option>
<option value="center">center</option>
<option value="end">end</option>
<option value="left">left</option>
<option value="right">right</option>
<option value="auto center">auto center</option>
<option value="normal start">normal start</option>
<option value="center normal">center normal</option>
<option value="start auto">start auto</option>
<option value="end normal">end normal</option>
<option value="self-start auto">self-start auto</option>
<option value="self-end normal">self-end normal</option>
<option value="flex-start auto">flex-start auto</option>
<option value="flex-end normal">flex-end normal</option>
<option value="left auto">left auto</option>
<option value="right normal">right normal</option>
<option value="baseline normal">baseline normal</option>
<option value="first baseline auto">first baseline auto</option>
<option value="last baseline normal">last baseline normal</option>
<option value="stretch auto">stretch auto</option>
</select>
</div>
var values = document.getElementById('values');
var display = document.getElementById('display');
var container = document.getElementById('container');
values.addEventListener('change', function (evt) {
container.style.placeItems = evt.target.value;
});
display.addEventListener('change', function (evt) {
container.className = evt.target.value;
});
#container {
height:200px;
width: 240px;
place-items: center; /* You can change this value by selecting another option in the list */
background-color: #8c8c8c;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 50px);
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Box Alignment Module Level 3
The definition of 'place-items' 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 完整支持 11 | WebView Android 完整支持 59 | Chrome Android 完整支持 59 | Firefox Android 完整支持 45 | Opera Android 完整支持 43 | Safari iOS 完整支持 11 | Samsung Internet Android 完整支持 7.0 |
完整支持
不支持
align-items
property
align-self
property
justify-items
property
justify-self
property