place-content
CSS
shorthand property
allows you to align content along both the block and inline directions at once (i.e. the
align-content
and
justify-content
properties) in a relevant layout system such as
Grid
or
Flexbox
.
此特性是下列 CSS 特性的简写：
/* Positional alignment */ /* align-content does not take left and right values */ place-content: center start; place-content: start center; place-content: end left; place-content: flex-start center; place-content: flex-end center; /* Baseline alignment */ /* justify-content does not take baseline values */ place-content: baseline center; place-content: first baseline space-evenly; place-content: last baseline right; /* Distributed alignment */ place-content: space-between space-evenly; place-content: space-around space-evenly; place-content: space-evenly stretch; place-content: stretch space-evenly; /* Global values */ place-content: inherit; place-content: initial; place-content: unset;
The first value is the
align-content
property value, the second the
justify-content
one.
Important : If the second value is not present, the first value is used for both, provided it is a valid value for both. If it is invalid for one or the other, the whole value will be invalid.
start
The items are packed flush to each other toward the start edge of the alignment container in the appropriate axis.
end
The items are packed flush to each other toward the end edge of the alignment container in the appropriate axis.
flex-start
start
.
flex-end
end
.
center
The items are packed flush to each other toward the center of the alignment container.
left
start
.
right
start
.
space-between
The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
baseline
first baseline
last baseline
first baseline
is
start
, the one for
last baseline
is
end
.
space-around
The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
space-evenly
The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
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
| 初始值 |
normal
|
|---|---|
| 适用于 | multi-line flex containers |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
<'align-content'> <'justify-content'>?
<div id="container"> <div class="small">Lorem</div> <div class="small">Lorem<br/>ipsum</div> <div class="large">Lorem</div> <div class="large">Lorem<br/>impsum</div> <div class="large"></div> <div class="large"></div> </div>
<code>writing-mode:</code><select id="writingMode"> <option value="horizontal-tb" selected>horizontal-tb</option> <option value="vertical-rl">vertical-rl</option> <option value="vertical-lr">vertical-lr</option> <option value="sideways-rl">sideways-rl</option> <option value="sideways-lr">sideways-lr</option> </select><code>;</code><br/> <code>direction:</code><select id="direction"> <option value="ltr" selected>ltr</option> <option value="rtl">rtl</option> </select><code>;</code><br/> <code>place-content:</code><select id="alignContentAlignment"> <option value="normal">normal</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option value="baseline">baseline</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> <option value="space-evenly" selected>space-evenly</option> <option value="stretch">stretch</option> <option value="center">center</option> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="safe">safe</option> <option value="unsafe">unsafe</option> </select> <select id="justifyContentAlignment"> <option value="normal">normal</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> <option value="space-evenly">space-evenly</option> <option value="stretch">stretch</option> <option value="center" selected>center</option> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="left">left</option> <option value="right">right</option> <option value="safe">safe</option> <option value="unsafe">unsafe</option> </select><code>;</code>
var update = function () {
document.getElementById("container").style.placeContent = document.getElementById("alignContentAlignment").value + " " + document.getElementById("justifyContentAlignment").value;
}
var alignContentAlignment = document.getElementById("alignContentAlignment");
alignContentAlignment.addEventListener("change", update);
var justifyContentAlignment = document.getElementById("justifyContentAlignment");
justifyContentAlignment.addEventListener("change", update);
var writingM = document.getElementById("writingMode");
writingM.addEventListener("change", function (evt) {
document.getElementById("container").style.writingMode = evt.target.value;
});
var direction = document.getElementById("direction");
direction.addEventListener("change", function (evt) {
document.getElementById("container").style.direction = evt.target.value;
});
#container {
display: flex;
height:240px;
width: 240px;
flex-wrap: wrap;
background-color: #8c8c8c;
writing-mode: horizontal-tb; /* Can be changed in the live sample */
direction: ltr; /* Can be changed in the live sample */
place-content: flex-end center; /* Can be changed in the live sample */
}
div > div {
border: 2px solid #8c8c8c;
width: 50px;
background-color: #a0c8ff;
}
.small {
font-size: 12px;
height: 40px;
}
.large {
font-size: 14px;
height: 50px;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Box Alignment Module Level 3
The definition of 'place content' in that specification. |
工作草案 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Supported in Flex Layout | Chrome 完整支持 59 | Edge 完整支持 79 |
Firefox
完整支持
45
注意事项
|
IE 不支持 No | Opera 完整支持 46 | Safari 完整支持 9 | WebView Android 完整支持 59 | Chrome Android 完整支持 59 |
Firefox Android
完整支持
45
注意事项
|
Opera Android 完整支持 43 | Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 7.0 |
| Supported in Grid Layout | Chrome 完整支持 59 | Edge 完整支持 79 |
Firefox
完整支持
53
注意事项
|
IE 不支持 No | Opera 完整支持 46 | Safari 完整支持 11 | WebView Android 完整支持 59 | Chrome Android 完整支持 59 |
Firefox Android
完整支持
53
注意事项
|
Opera Android 完整支持 43 | Safari iOS 完整支持 11 | Samsung Internet Android 完整支持 7.0 |
完整支持
不支持
见实现注意事项。
align-content
property
justify-content
property