地方项目 | place-items

CSS 简写属性同时设置和属性。第一个值是属性值，第二个是属性值。如果第二个值不存在，第一个值也用于它。place-itemsalign-itemsjustify-itemsalign-itemsjustify-items

语法

/* 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所使用的价值是justiy-items父母财产的价值，除非这个盒子没有父母，或者绝对定位，在这些情况下，auto代表normal。normal这个关键字的效果取决于我们所在的布局模式：

• 在块级布局中，关键字是一个同义词start。

• 在绝对定位的布局中，关键字表现得像start上代替绝对定位的盒，并且作为stretch对所有其他绝对定位的盒子。

• 在表格单元布局中，这个关键字没有意义，因为这个属性被忽略。

• 在flexbox布局中，此关键字没有意义，因为此属性被忽略。

• 在网格布局中，这个关键字会导致类似的行为stretch，除了具有宽高比的方框或其行为类似的内在尺寸外start。

start在适当的轴线上朝向对齐容器的起始边缘彼此齐平地包装。

end在适当的轴线上朝向对齐容器的端部边缘彼此齐平地包装。

flex-start根据柔性集装箱的主启动或交叉启动侧，物品朝向对齐容器的边缘彼此齐平。

这仅适用于柔性布局项目。对于不是弹性容器的子项的项目，这个值被视为像start。

flex-end根据柔性集装箱的主端或交叉端，物品朝向对齐容器的边缘彼此齐平地包装。

这仅适用于柔性布局项目。对于不是弹性容器的子项的项目，这个值被视为如同end。

self-start物品在相应的轴上与物品开始侧的对齐容器边缘齐平。

self-end物品与物品端侧的对齐容器的边缘齐平，并放置在相应的轴上。

center物品朝向对齐容器的中心彼此齐平地包装。

left物品朝向对齐容器的左边缘彼此齐平。如果属性的轴不与内联轴平行，则该值的行为如同start。

right物品在适当的轴线上朝向对齐容器的右边缘彼此齐平。如果属性的轴不与内联轴平行，则该值的行为如同start。

baseline

first baseline

last baseline指定参与首次或最后一次基线对齐：将框的第一个或最后一个基准集的对齐基线与基准线共享组中所有框的共享第一个或最后一个基准线集中的相应基线对齐。

first baseline的回退定位是start，一只为last baseline是end。stretch如果物品的组合尺寸小于对齐容器的auto尺寸，则任何尺寸的物品的尺寸均等（不成比例地增加），同时仍然考虑由max-height/ max-width（或等同的功能）施加的约束，使得组合的尺寸准确地填充对齐容器。

示例

CSS

#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);
}

结果

规范

浏览器兼容性