align-content 和 align-items 有什么区别？（这是一个提问标题，不需要回答）

Question

align-content 和 align-items 有什么区别？（这是一个提问标题，不需要回答）

csslayoutflexboxalignment

706

align-items和align-content有什么区别？

- Dinh

2

align items和align content是与CSS布局相关的属性。 - jbutler483

3

我已经翻阅了克里斯的年鉴，但仍然没有弄清楚。 - Dinh

3

https://dev59.com/wek5XIcBkEYKwwoY_O6N - Michael Benjamin

1

我永远无法真正理解这个 :-/ - Simon_Weaver

4

align-content用于管理当项目换行时行之间的空间。 align-items用于在项目大小不同的情况下相对于彼此对齐项目。当项目的大小相同时，且只有一行时，它们的行为类似。 - Jens Frandsen

15个回答

241

以下内容来自 flexboxfroggy.com 的示例：

完成这个游戏需要10-20分钟，到达第21关时你会找到你的答案。

align-content 属性用于设置行与行之间的间距。

align-items 属性用于设置容器中所有项目的对齐方式。

当只有一行时，align-content 属性不起作用。

- Alireza Fattahi

20

确实，我觉得青蛙的例子非常有用。从中学到了很多。 - Spikatrix

3

实际上，即使是单行内容，如果容器具有非收缩包高度（即容器高于任何子项），align-content也会产生影响。 align-items相对于内容行定位每个子项，而align-content则相对于容器定位每行内容。并且名称为“align”和“justify”，因为真正的方向取决于flex-flow。我更喜欢使用“平行”和“垂直”代替。 - Mikko Rantalainen

@MikkoRantalainen：我没有观察到 align-content 对单行/单列弹性内容的影响。此外，MDN 与您的看法不同（https://developer.mozilla.org/en-US/docs/Web/CSS/align-content）。 - wortwart

1

@wortwart 请查看 https://jsfiddle.net/n2ruogLt/ 上的演示 - 注意即使没有使用 align-content，字母 a、b、c、d 所在的行也会出现在容器的末尾。 - Mikko Rantalainen

@Spikatrix，我无法完成第24关。某些事情似乎不再起作用，比如更改justify-content。 - West

显示剩余2条评论

87

首先，align-items 用于单行中的项目。因此，在主轴上有单行元素时，align-items 将使这些项目相互对齐，并从下一行开始重新开始处理。

而 align-content 不会干扰单行中的项目，而是与所在的行本身对齐。因此，align-content 将尝试将行与伸缩容器及彼此对齐。

请查看此 fiddle：https://jsfiddle.net/htym5zkn/8/

- Uday Hiwarale

那么对于 flex-direction 为 row 的情况，只有在 flexbox 设置了高度并且不仅使用子元素的高度时，align-content 才会起作用，从而留出空间在行之间/周围添加空间？ - Kevin Wheeler

41

我曾经也有同样的困惑。在参考了上面许多答案的基础上，我终于看到了区别。依我之见，最好用满足以下两个条件的弹性容器来展示区别：

弹性容器本身有高度限制（例如 min-height: 60rem），因此可能会变得过高以适应其内容
包含在容器中的子项具有不均匀的高度

{{条件 1}}帮助我理解相对于其父容器，content的含义。当内容与容器齐平时，我们将无法看到来自align-content的任何定位效果。只有在交叉轴上有额外空间时，我们才开始看到它的效果：它将内容与父容器的边界对齐。

{{条件 2}}帮助我可视化align-items的效果：它将项目相对彼此对齐。

这是一个代码示例。原材料来自Wes Bos的CSS Grid教程（21. Flexbox vs. CSS Grid）

示例HTML：

  <div class="flex-container">
    <div class="item">Short</div>
    <div class="item">Longerrrrrrrrrrrrrr</div>
    <div class="item"></div>
    <div class="item" id="tall">This is Many Words</div>
    <div class="item">Lorem, ipsum.</div>
    <div class="item">10</div>
    <div class="item">Snickers</div>
    <div class="item">Wes Is Cool</div>
    <div class="item">Short</div>
  </div>

示例CSS：

.flex-container {
  display: flex;
  /*dictates a min-height*/
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
 }

#tall {
  /*intentionally made tall*/
  min-height: 30rem;
}

.item {
  margin: 10px;
  max-height: 10rem;
}

示例1：让视口变窄，使内容与容器对齐。当整个内容块紧密适合容器时（没有额外的重新定位空间！），align-content: flex-start;就没有效果了。

此外，请注意第二行 - 看看项目如何在自己之间居中对齐。

例子2：当我们扩大视口时，我们没有足够的内容来填满整个容器。现在我们开始看到align-content: flex-start;的效果 - 它相对于容器顶部边缘对齐内容。

这些示例基于弹性盒模型，但相同的原则也适用于CSS网格布局。希望这能帮到你 :)

- Shan Dou

1

向Wesbos致敬？ :P - Tilak Madichetti

太棒了的解释。条件1和条件2是其他大部分解释中所缺少的。谢谢！ - Eliezer Berlin

17

align-items和align-content的效果作用于交叉轴。假设flex-direction为row，则主轴是从左到右，如果flex-direction是column，则主轴是从上到下。因此在下面的示例中，我们假定flex-direction是row，即主轴是从左到右，交叉轴是从上到下。引用块中提到的只有在容器中有多行元素时，align-content才起作用。而且align-content的优先级高于align-items，如果有多个 flex 行。什么是 flex 行？在 flex 容器中，每一行或列都是一个 flex 行。当容器中没有足够的空间容纳所有 flex 元素时（在 flex-direction:row 中），它们将跳至下一行。在 flex-direction: column 中，它们将被添加到下一列。默认情况下，flex 是一个灵活的容器，即它可以容纳任意数量的元素（除非我们指定了flex-wrap：wrap）。没有换行，flex 元素会溢出容器（如果flex-direction是row）。以下是一个align-content的示例：example。

.container{
  border: 5px solid #000;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

.box{
  height:100px;
  font-size: 2rem;
  width: 33.33%;
}

.box1{
  background: purple;
}

.box2{
  background:   #ff8c00;
}

.box3{
  background: lime;
}

.box4{
  background: #008080;
}

.box5{
  background-color: red; 
}

<div class="container">
  <div class="box box1">box 1</div>
  <div class="box box2">box 2</div>
  <div class="box box3">box 3</div>
  <div class="box box4">box 4</div>
  <div class="box box5">box 5</div>
</div>

在上面的例子中，如果有flex-wrap: no-wrap，那么align-content将不会影响我们的布局。

align-items示例

align-items属性确定如何沿着交叉轴在一个弹性线内定位弹性项。

.container{
  border: 5px solid #000;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.box{
  height:100px;
  font-size: 2rem;
  width: 33.33%;
}

.box1{
  background: purple;
}

.box2{
  background:   #ff8c00;
}

.box3{
  background: lime;
}

.box4{
  background: #008080;
}

.box5{
  background-color: red; 
}

<div class="container">
  <div class="box box1">box 1</div>
  <div class="box box2">box 2</div>
  <div class="box box3">box 3</div>
  <div class="box box4">box 4</div>
  <div class="box box5">box 5</div>
</div>

如果在一个容器上声明了属性 flex-wrap: wrap 并且有多个弹性行，则align-content 属性的优先级高于align-items。

align-content and align-items priority example

.container{
  border: 5px solid #000;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: flex-start;
}

.box{
  height:100px;
  font-size: 2rem;
  width: 33.33%;
}

.box1{
  background: purple;
}

.box2{
  background:   #ff8c00;
}

.box3{
  background: lime;
}

.box4{
  background: #008080;
}

.box5{
  background-color: red; 
}

<div class="container">
  <div class="box box1">box 1</div>
  <div class="box box2">box 2</div>
  <div class="box box3">box 3</div>
  <div class="box box4">box 4</div>
  <div class="box box5">box 5</div>
</div>

- DecPK

13

我在浏览器上对它们进行了检查。

align-content可以在值为stretch时更改行方向的高度或列方向的宽度，或者在space-between、space-around、flex-start、flex-end values值情况下在行之间或周围添加空白间隔。

align-items可以更改项目在行区域内的高度或位置。当项目不换行时，它们只有一条线，该线的区域始终被伸展到 flex-box 区域（即使项目溢出），并且align-content对单行没有影响。因此，它对未换行的项目没有影响，只有align-items可以在所有项目位于单行时更改它们的位置或将它们拉伸。

但是，如果它们已经换行，则每行都有多个项目。如果每行的所有项目具有相同的高度（对于行方向），则该行的高度将等于这些项目的高度，并且通过更改align-items值不会看到任何影响。

因此，如果您想在项目换行且高度相同时（对于行方向）通过align-items影响项目，则首先必须使用值为stretch的align-content以扩展行区域。

- TheNegative

12

阅读了一些答案, 他们正确地指出，如果弹性内容没有包装，align-content 不起作用。但是他们不理解的是，当有包装内容时，align-items 仍然扮演着重要的角色：

在以下两个示例中，align-items 被用来居中每一行的项目，然后我们改变 align-content 来看到它的效果。

示例1：
align-content: flex-start;

示例2：
align-content: flex-end;

这是代码:
<div class="container"> <div class="child" style="height: 30px;">1</div> <div class="child" style="height: 50px;">2</div> <div class="child" style="height: 60px;">3</div> <div class="child" style="height: 40px;">4</div> <div class="child" style="height: 50px;">5</div> <div class="child" style="height: 20px;">6</div> <div class="child" style="height: 90px;">7</div> <div class="child" style="height: 50px;">8</div> <div class="child" style="height: 30px;">9</div> <div class="child" style="height: 40px;">10</div> <div class="child" style="height: 30px;">11</div> <div class="child" style="height: 60px;">12</div> </div> <style> .container { display: flex; width: 300px; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: flex-end; background: lightgray; height: 400px; } .child { padding: 12px; background: red; border: solid 1px black; } </style>

- run_the_race

9

align-content

align-content 控制多行内容在交叉轴上（即当 flex-direction 为 row 时垂直方向，为 column 时水平方向）相对于彼此的位置。

（可以想象一个段落的行被垂直展开，向顶部堆叠或向底部堆叠。这是在 flex-direction 行范式下的情况）。

align-items

align-items 控制 flex 元素中单独一行的交叉轴对齐方式。

（想象一下一个段落中的单独一行文本如何对齐，如果它包含一些普通文本和一些较高的数学公式。在这种情况下，每种类型文本所在行的底部、顶部或中心将对齐。）

- ahnbizcad

6

align-items 属性将子元素垂直间隔排列。

align-content 属性将它们聚集在一起，就像它们是一个元素。

(如果 flex-direction 是列方向的)

- Embedded_Mugs

它取决于弹性方向，它不总是垂直的。 - West

5

关键属性是 flex-wrap。当为 nowrap（或交叉轴没有额外的空间时），align-content 不起作用。当为 wrap 或 wrap-reverse 时，如果交叉轴有额外的空间，则始终会起作用（无论行数如何）。

比较这四个盒子：

- JukkaP

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asim K T · Accepted Answer

flex-box的align-items属性沿交叉轴对齐flex容器内的项目，就像justify-content在主轴上对齐一样。（对于默认的flex-direction:row，交叉轴对应垂直方向，主轴对应水平方向。对于flex-direction:column分别交换两者）。下面是一个align-items:center的示例：

但是align-content是为多行灵活盒子设计的。当项目在单行中时，它不起作用。它根据其值对整个结构进行对齐。这里是一个align-content: space-around; 的示例:

这里是align-content: space-around;与align-items:center的示例,请注意第三个盒子和所有其他在第一行的盒子都会变成垂直居中：

以下是一些codepen链接，可供使用： http://codepen.io/asim-coder/pen/MKQWbb http://codepen.io/asim-coder/pen/WrMNWR

这里有一个超酷的笔，它展示并让你与 flexbox 中的几乎所有内容互动。