place-content

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流浏览器均已支持。

place-content CSS 简写属性允许您在相关的布局系统（例如网格或Flexbox）中同时沿块方向和行方向对齐内容（即align-content和justify-content属性）。

试一试

place-content: end space-between;

place-content: space-around start;

place-content: start space-evenly;

place-content: end center;

place-content: end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 60px 60px;
  grid-auto-rows: 40px;
  height: 180px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

构成属性

此属性是以下 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属性值。

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

值

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（或等效功能）施加的约束，以便组合大小正好填满对齐容器。
safe: 与对齐关键字一起使用。如果所选关键字意味着项目会溢出对齐容器导致数据丢失，则项目将改为像对齐模式为 start 一样对齐。
unsafe: 与对齐关键字一起使用。无论项目和对齐容器的相对大小如何，也无论是否可能发生导致数据丢失的溢出，都会遵循给定的对齐值。

正式定义

初始值	作为简写中的每个属性 `align-content`: `normal` `justify-content`: `normal`
应用于	多行弹性容器
继承性	否
计算值	作为简写中的每个属性 `align-content`: as specified `justify-content`: as specified
动画类型	离散

正式语法

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 Box Alignment Module Level 3 # place-content

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后由MDN 贡献者于2025 年 7 月 14 日修改。

在 GitHub 上查看此页面 • 报告此内容存在的问题