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

flex-box 的 align-items 属性沿交叉轴对齐 flex 容器内的项目，就像 justify-content 沿主轴对齐一样。 （对于默认的 flex-direction: row，横轴对应于垂直，主轴对应于水平。使用 flex-direction: column，这两者分别互换）。

以下是 align-items:center 的外观示例：

https://i.stack.imgur.com/Wcfm5.png

https://i.stack.imgur.com/OHTV1.png

https://i.stack.imgur.com/qX3as.png

请注意，第一行中的第三个框和所有其他框更改为该行的垂直居中。

以下是一些可以使用的 codepen 链接：

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

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

---

从 flexboxfroggy.com 的示例：

align-content 确定行之间的间距 align-items 确定整个项目如何在容器内对齐。只有一行时，align-content 无效

---

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

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

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

---

我也有同样的困惑。在根据上面的许多答案进行一些修补之后，我终于可以看到差异。以我的拙见，这种区别最好通过满足以下两个条件的 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 行 - 查看项目之间如何居中对齐。

https://i.stack.imgur.com/0bfVR.png

https://i.stack.imgur.com/22Vtj.png

这些示例基于 flexbox，但同样的原则也适用于 CSS 网格。希望这可以帮助 ：）

---

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

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

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

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

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

---

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-direction: row; 中）以适应。在 flex-direction: column 中，它将弹性项目添加到下一行。

example

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

对齐内容示例

.container{ 边框：5px 实心 #000;高度：100vh；显示：弯曲；弹性包装：换行；对齐内容：弹性结束； } .box{ 高度：100px;字体大小：2rem；宽度：33.33%； } .box1{ 背景：紫色； } .box2{ 背景：#ff8c00; } .box3{ 背景：石灰； } .box4{ 背景：#008080; } .box5{ 背景颜色：红色； }

在上面的示例中，如果存在 flex-wrap: no-wrap，则 align-content 不会影响我们的布局。

对齐项目示例

align-items 属性决定了弹性项目如何在弹性线内沿横轴定位。

.container{ 边框：5px 实心 #000;高度：100vh；显示：弯曲；弹性包装：换行；对齐项目：flex-end； } .box{ 高度：100px;字体大小：2rem；宽度：33.33%； } .box1{ 背景：紫色； } .box2{ 背景：#ff8c00; } .box3{ 背景：石灰； } .box4{ 背景：#008080; } .box5{ 背景颜色：红色； }

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

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

.container{ 边框：5px 实心 #000;高度：100vh；显示：弯曲；弹性包装：换行；对齐内容：弹性结束；对齐项目：弹性开始； } .box{ 高度：100px;字体大小：2rem；宽度：33.33%； } .box1{ 背景：紫色； } .box2{ 背景：#ff8c00; } .box3{ 背景：石灰； } .box4{ 背景：#008080; } .box5{ 背景颜色：红色； }

---

阅读了一些答案后，他们正确地识别出 align-content 如果未包装 flex 内容不会产生任何影响。然而他们不明白的是，当有包装的内容时，align-items 仍然发挥着重要作用：

在下面的两个示例中，align-items 用于将 每一行 中的项目居中，然后我们更改 align-content 以查看它的效果。

示例 1：

align-content: flex-start;

https://i.stack.imgur.com/EPM6n.png

示例 2：

    align-content: flex-end;

https://i.stack.imgur.com/bNREJ.png

这是代码：

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

---

对齐内容

align-content 控制多 行相对于彼此的交叉轴（即，如果 flex-direction 为 row，则为垂直方向，如果 flex-direction 为 column，则为水平方向）定位。

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

对齐项目

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

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

---

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

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

---

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

什么是横轴和主轴

主轴是水平行，横轴是垂直列 - 对于 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 用于行中的项目 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

---

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

https://i.stack.imgur.com/O2c1z.png

这是我们得到的结果

align-content:center;

---

第一部分

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

第二部分

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

https://i.stack.imgur.com/VGisj.png

---

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

---

根据我对 here 的理解：

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

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

---