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

【问题标题】：What's the difference between align-content and align-items?align-content 和 align-items 有什么区别？
【发布时间】：2015-02-16 19:24:04
【问题描述】：

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

【问题讨论】：

align items 和 align content
我也挖了克里斯的历书，但还是没搞清楚
stackoverflow.com/q/42613359/3597276
我永远不会真正理解这一点：-/
align-content 管理项目换行时行之间的空间。 align-items 当项目的大小不同时，将项目相对于彼此对齐。当项目的大小相同且只有一行时，它们的行为相似。

标签： css layout flexbox alignment

【解决方案1】：

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

Here's 一款超酷的笔，它可以显示并让您玩弄 flexbox 中的几乎所有内容。

【讨论】：

请注意align-* 属性也可以水平移动弹性项目。这取决于flex-direction。 stackoverflow.com/q/32551291/3597276
这无疑是最好的解释。其他人都惨败。
> "但 align-content 用于多行灵活框。当项目位于单行时，它不起作用" - 在最新的 Firefox 中，这似乎不正确，或者不被尊重（2020 年 5 月）。相反，如果有一条 flex-line（所有内容都在小于主轴长度的范围内）小于全高（横轴大小小于可用的全高），则 align-content if set 将消除对齐项。这是有道理的：它适用于它找到的任何行？

【解决方案2】：

来自flexboxfroggy.com的示例：

align-content决定行间距

align-items 确定整个项目在容器内的对齐方式。

只有一行时，align-content无效

【讨论】：

确实，我确实发现青蛙示例非常有用。从中学到了很多。
实际上，align-content 对单行内容也有效，如果容器具有非收缩包装高度（即容器高于任何子项）。 align-items 相对于内容行定位每个子元素，align-content 相对于容器定位每行内容。名称是“对齐”和“对齐”，因为真正的方向取决于flex-flow。我更喜欢“平行”和“正交”。
@MikkoRantalainen：我没有观察到align-content 对单行/列弹性内容有任何影响。另外，MDN 不同意你的观点 (developer.mozilla.org/en-US/docs/Web/CSS/align-content)。
@wortwart 请参阅jsfiddle.net/n2ruogLt 的演示——注意带有字母 a、b、c、d 的行如何在容器末尾结束，即使它没有 align-content。跨度>

【解决方案3】：

首先，align-items 用于单行中的项目。因此，对于主轴上的单行元素，align-items 会将这些项目相互对齐，并从下一行的新视角开始。

现在，align-content 不会干扰行中的项目，而是影响行本身。因此，align-content 将尝试将行相对于彼此对齐并弹性容器。

检查这个小提琴：https://jsfiddle.net/htym5zkn/8/

【讨论】：

【解决方案4】：

我也有同样的困惑。在根据上面的许多答案进行一些修补之后，我终于可以看到差异。依我的拙见，这种区别最好通过满足以下两个条件的 flex 容器来展示：

flex 容器本身有一个高度限制（例如，min-height: 60rem），因此对于它的内容来说可能太高
包含在容器中的子项具有不均匀的高度

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

条件 2 帮助我可视化 align-items 的效果：它使项目相互对齐。

这是一个代码示例。原材料来自Wes Bos' CSS Grid tutorial（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 行 - 查看项目之间如何居中对齐。

示例 2：随着我们扩大视口，我们不再有足够的内容来填满整个容器。现在我们开始看到align-content: flex-start; 的效果——它使内容相对于容器的上边缘对齐。

这些示例基于 flexbox，但同样的原则也适用于 CSS 网格。希望这会有所帮助:)

【讨论】：

【解决方案5】：

好吧，我已经在浏览器上检查了它们。

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

align-items 可以改变项目在行区域内的高度或位置。当项目没有被包装时，它们只有一行，它的区域总是被拉伸到弹性框区域（即使项目溢出），align-content 对单行没有影响。所以它对未包装的项目没有影响，只有 align-items 可以更改项目的位置或在它们都在一行时拉伸它们。

但是，如果它们被包装，则每行内都有多行和项目。如果每行的所有项目都具有相同的高度（对于行方向），则该行的高度将等于这些项目的高度，并且您不会通过更改 align-items 值看到任何效果。

因此，如果您想在您的项目被包装并且具有相同高度（对于行方向）时通过align-items 影响项目，则首先您必须使用带有拉伸值的align-content 以扩展线条区域。

【讨论】：

【解决方案6】：

阅读了一些答案后，他们正确地识别出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>

【讨论】：

【解决方案7】：

align-items 和align-content 的效果都是沿横轴。

假设flex-direction 是row，那么主轴是Left to Right，如果flex-direction 是column，那么主轴来自top to bottom。

所以在下面的例子中，我们假设flex-direction 是row，即主轴是从左到右，横轴是从上到下。

align-content 仅在有 flex-wrap: wrap 并且容器中有多个 flex-line 时才有效。

如果有多个 flex-line，align-content 的优先级高于 align-items。

什么是 flex-line？

弹性容器中弹性项目的每一行或每一列都是一条弹性线。当容器中没有足够的空间时会出现多行，并且 flex-items 将占用下一行（在flex-direction: row;）以适应。在flex-direction: column 中，它会将弹性项目添加到下一行。

example

默认情况下，flex 是一个灵活的容器，即它可以容纳任意数量的元素，除非我们指定了flex-wrap: wrap。如果没有 wrap，flex-items 会溢出容器（如果 flex-direction 是 row）。

对齐内容示例

.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 属性决定了弹性项目如何在弹性线内沿横轴定位。

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

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

align-content 和align-items 优先级示例

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

【讨论】：

【解决方案8】：

对齐内容

align-content 控制相对于彼此。

（假设段落的行垂直展开，向顶部堆叠，向底部堆叠。这是在flex-direction 行范式下）。

对齐项目

align-items 控制单行 flex 元素的横轴。

（想想段落的单行是如何对齐的，如果它包含一些普通文本和一些更高的文本，比如数学方程式。在这种情况下，它会是每个文本类型的底部、顶部还是中心？将对齐的线？）

【讨论】：

【解决方案9】：

我从每个答案和访问博客中学到的是

什么是横轴和主轴

主轴是水平行，横轴是垂直列 - 对于flex-direction: row
主轴是垂直列，横轴是水平行 - 用于flex-direction: column

现在对齐内容和对齐项目

align-content 用于行，如果容器有（多于一行）则有效 align-content 的属性

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

align-items 用于行中的项目对齐项的属性

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

更多参考请访问flex

【讨论】：

【解决方案10】：

align-items 垂直分布子元素，它们之间有空格。

align-content 将它们组合在一起，就好像它们是一个元素一样。

【讨论】：

【解决方案11】：

虽然 align-items 将作为 在容器内水平和垂直的单行文本 居中，但 align-content 将表现为如果有多行文本或一个段落，并且从顶部开始对齐甚至单行文本，就好像它是已被赋予 text-align: center 规则的段落。

这是我们得到的结果

align-content:center;

【讨论】：

【解决方案12】：

第一部分

align-items 仅适用于单行框。假设容器内的一行中有 4 个盒子。然后 align-items 将应用于将这些框对齐在一行中。如果 flex-direction 是 row （这是默认值），那么 align-items 将垂直排列盒子，如果它的 column 则水平排列盒子。

第二部分

继续上面的单行盒子，如果我们再添加一行 4 个盒子，现在有 8 个盒子，每行 4 个。这里 align-content 出现了，如果我们将 align-content 应用于容器，它将应用于总共有 8 个框的两行。如果我们应用 align-content:center，它将在容器中将两条线居中。从这个意义上说，align-content 用于排列多行灵活框。

对齐项目：居中，对齐内容：弹性开始

【讨论】：

【解决方案13】：

主要区别在于元素的高度不同时！然后你可以看到如何在行中，它们都是center\end\start

【讨论】：

这并不能说明区别。

【解决方案14】：

根据我从here了解到的：

当您使用 align-item 或 justify-item 时，您正在调整“分别沿列轴或行轴的网格项目内的内容。

但是：如果您使用 align-content 或 justify-content，则将位置设置为沿列轴或行轴的网格。当您在较大的容器中有一个网格并且宽度或高度不灵活（使用 px）时，就会发生这种情况。

【讨论】：

这是不准确且令人困惑的。 align-items 不固定控制列，而是取决于 flex-direction。同样 align-content 不仅适用于列轴，而且 justify-content 不仅适用于行轴。 justify-itemS 与弹性盒子无关。