place-content

**place-content** CSS 简写属性允许您一次性在块级和内联方向上对齐内容（即 align-content 和 justify-content 属性）在相关的布局系统中，例如网格或 Flexbox。

试一试

组成属性

此属性是以下 CSS 属性的简写

语法

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: revert;
place-content: revert-layer;
place-content: unset;

第一个值是 align-content 属性值，第二个是 justify-content 属性值。

注意：如果第二个值不存在，则第一个值用于两者，前提是它是两者都有效的值。如果它对其中一个或另一个无效，则整个值将无效。

Values

start: 项目在相应轴上紧密排列在一起，朝向对齐容器的起始边缘。
end: 项目在相应轴上紧密排列在一起，朝向对齐容器的结束边缘。
flex-start: 项目在相应轴上紧密排列在一起，朝向对齐容器的边缘，具体取决于 flex 容器的主起始或交叉起始侧。这仅适用于 flex 布局项目。对于不是 flex 容器子元素的项目，此值将被视为与 start 相同。
flex-end: 项目在相应轴上紧密排列在一起，朝向对齐容器的边缘，具体取决于 flex 容器的主结束或交叉结束侧。这仅适用于 flex 布局项目。对于不是 flex 容器子元素的项目，此值将被视为与 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（或等效功能）施加的约束，以便组合大小正好填满对齐容器。
safe: 与对齐关键字一起使用。如果选定的关键字意味着项目溢出对齐容器导致数据丢失，则项目将改为像对齐模式为start一样对齐。
unsafe: 与对齐关键字一起使用。无论项目和对齐容器的相对大小如何，以及是否可能发生导致数据丢失的溢出，都会使用给定的对齐值。

正式定义

初始值	作为速记的每个属性 `align-content`: `normal` `justify-content`: `normal`
应用于	多行弹性容器
继承	否
计算值	作为速记的每个属性 `align-content`: 如指定 `justify-content`: 如指定
动画类型	离散

正式语法

place-content = 
  <'align-content'> <'justify-content'>?  

<align-content> = 
  normal                                   |
  <baseline-position>                      |
  <content-distribution>                   |
  <overflow-position>? <content-position>  

<justify-content> = 
  normal                                              |
  <content-distribution>                              |
  <overflow-position>? [ <content-position> | left | right ]  

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<content-distribution> = 
  space-between  |
  space-around   |
  space-evenly   |
  stretch        

<overflow-position> = 
  unsafe  |
  safe    

<content-position> = 
  center      |
  start       |
  end         |
  flex-start  |
  flex-end

示例

在弹性容器中放置内容

HTML

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

function update() {
  document.getElementById("container").style.placeContent =
    `${document.getElementById("alignContentAlignment").value} ` +
    `${document.getElementById("justifyContentAlignment").value}`;
}

const alignContentAlignment = document.getElementById("alignContentAlignment");
alignContentAlignment.addEventListener("change", update);

const justifyContentAlignment = document.getElementById(
  "justifyContentAlignment",
);
justifyContentAlignment.addEventListener("change", update);

const writingM = document.getElementById("writingMode");
writingM.addEventListener("change", (evt) => {
  document.getElementById("container").style.writingMode = evt.target.value;
});

const direction = document.getElementById("direction");
direction.addEventListener("change", (evt) => {
  document.getElementById("container").style.direction = evt.target.value;
});

CSS

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

结果

规范

规范
CSS 盒子对齐模块第 3 级 # place-content

浏览器兼容性

BCD 表格只在启用 JavaScript 的浏览器中加载。