CSS 的 **place-items
** 简写属性 允许您同时沿块方向和内联方向对齐项目(即在相关的布局系统(如 网格 或 Flexbox )中使用 align-items
和 justify-items
属性)。如果未设置第二个值,则第一个值也用于第二个值。
place-items : center;
place-items : normal start;
place-items : center normal;
place-items : start legacy;
place-items : end normal;
place-items : self-start legacy;
place-items : self-end normal;
place-items : flex-start legacy;
place-items : flex-end normal;
place-items : anchor-center;
place-items : baseline normal;
place-items : first baseline legacy;
place-items : last baseline normal;
place-items : stretch legacy;
place-items : inherit;
place-items : initial;
place-items : revert;
place-items : revert-layer;
place-items : unset;
place-items = <'align-items'> <'justify-items'> ? <align-items> = normal | stretch | <baseline-position> | [ <overflow-position> ? <self-position> ] | anchor-center <justify-items> = normal | stretch | <baseline-position> | <overflow-position> ? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center <baseline-position> = [ first | last ] ? && baseline <overflow-position> = unsafe | safe <self-position> = center | start | end | self-start | self-end | flex-start | flex-end 在 Flexbox 中,justify-self
或 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;
font-size : 2em;
}
#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;
}
select {
font-size : 16px;
}
.row {
margin-top : 10px;
}
< div id = " container" >
< div id = " item1" > 1</ div>
< div id = " item2" > 2</ div>
< div id = " item3" > 3</ div>
</ div>
< div class = " row" >
< label for = " values" > place-items: </ label>
< select id = " values" >
< option value = " stretch" > stretch</ option>
< 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>
const values = document. getElementById ( "values" ) ;
const container = document. getElementById ( "container" ) ;
values. addEventListener ( "change" , ( evt ) => {
container. style. placeItems = evt. target. value;
} ) ;
CSS
#container {
height : 200px;
width : 240px;
place-items : stretch;
background-color : #8c8c8c;
display : flex;
}
结果
以下网格容器包含的项目小于其放置的网格区域,因此 place-items
将在块方向和内联方向上移动它们。
div > div {
box-sizing : border-box;
border : 2px solid #8c8c8c;
}
#item1 {
background-color : #8cffa0;
min-height : 30px;
font-size : 2em;
}
#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;
}
select {
font-size : 16px;
}
.row {
margin-top : 10px;
}
< div id = " gridcontainer" >
< 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>
< div class = " row" >
< label for = " gridvalues" > place-items: </ label>
< select id = " gridvalues" >
< option value = " stretch" > stretch</ option>
< 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>
const values = document. getElementById ( "gridvalues" ) ;
const container = document. getElementById ( "gridcontainer" ) ;
values. addEventListener ( "change" , ( evt ) => {
container. style. placeItems = evt. target. value;
} ) ;
CSS
#gridcontainer {
height : 200px;
width : 240px;
place-items : stretch;
background-color : #8c8c8c;
display : grid;
grid-template-columns : repeat ( 3, 1fr) ;
}
#gridcontainer > div {
width : 50px;
}
结果
BCD 表格仅在启用 JavaScript 的浏览器中加载。 启用 JavaScript 以查看数据。