地方内容 | place-content

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

/* Positional alignment */ 
place-content: center start;  
place-content: start center; 
place-content: end left; 
place-content: flex-start center;
place-content: flex-end center; 
place-content: left center; 
place-content: right end;

/* Baseline alignment */ 
place-content: baseline baseline; 
place-content: first baseline last baseline; 
place-content: last baseline baseline;

/* 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;

在数据库中找不到值！

语法

值

start项目在适当的轴线上朝向对齐容器的起始边缘彼此齐平地包装。end项目在适当的轴线上朝向对齐容器的端部边缘彼此齐平地包装。flex-start根据柔性集装箱的主启动或交叉启动侧，物品朝向对齐容器的边缘彼此齐平地包装。

这仅适用于柔性布局项目。对于不是弹性容器的子项的项目，这个值被视为像start。flex-end根据柔性容器的主要端或交叉端侧，物品朝向对齐容器的边缘彼此齐平地包装。

这仅适用于柔性布局项目。对于不是弹性容器的子项的项目，这个值被视为像end。center物品朝向对齐容器的中心彼此齐平地包装。left物品朝向对齐容器的左边缘彼此齐平。如果属性的轴不与内联轴平行，则该值的行为如同start。right物品在适当的轴线上朝向对齐容器的右边缘彼此齐平。如果属性的轴不与内联轴平行，则该值的行为如同start。space-between物品均匀分布在对齐容器内。每一对相邻物品之间的间隔是相同的。第一个项目与主起始边缘齐平，最后一个项目与主端边缘齐平。baseline

first baseline

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

first baseline的回退定位是start，一只为last baseline是end。space-around物品均匀分布在对齐容器内。每一对相邻物品之间的间隔是相同的。第一个和最后一个项目之前的空白空间等于每对相邻项目之间的空间的一半。space-evenly物品均匀分布在对齐容器内。每一对相邻的项目，主起始边缘和第一项目，以及主要边缘和最后项目之间的间隔都完全相同。stretch如果物品的组合尺寸小于对齐容器的auto尺寸，则任何尺寸的物品的尺寸均等地（不成比例地）增加，同时仍然遵守由max-height/max-width （或同等功能），以便合并的大小正好填充对齐容器

示例

CSS

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

HTML

<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>

结果

规范

Specification	Status	Comment
CSS Box Alignment ModuleThe definition of 'place content' in that specification.	Working Draft	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	59	?	(Yes)	?	?	?

Feature	Android Webview	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	59	59	?	(Yes)	?	?	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18