align-content和align-items有什么区别？
Answers:
align-itemsflex-box 的属性就像justify-content沿着主轴一样，沿横轴对齐flex容器内的项目。（默认情况下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中的几乎所有内容。
我发现示例http://flexboxfroggy.com/非常有用。
这将花费您10-20分钟，在21级时，您会找到问题的答案。它提到：
align-content确定行之间的间距，而align-items 确定项目在容器中如何整体对齐。如果只有一行，则align-content无效
首先，align-items是针对单行中的项目。因此，对于主轴上的一行元素，align-items将使这些项目彼此对齐，并且将从下一行的新视角开始。
现在，align-content它不会干扰一行中的项目，而是会干扰rows本身。因此，align-content将尝试使行相对于彼此对齐并弯曲容器。
检查这个小提琴：https：//jsfiddle.net/htym5zkn/8/
我也有同样的困惑。在根据上述许多答案进行了一些修补之后，我终于可以看到不同之处。以我的拙见，这种区别最好通过满足以下两个条件的flex容器来证明：
- flex容器本身具有高度限制（例如
min-height: 60rem），因此可能会变得过高对于其内容 - 包含在容器中的子项目的高度不均匀
条件1帮助我了解content相对于其父容器的含义。当内容与容器齐平时，我们将看不到来自的任何定位效果align-content。只有当我们在横轴上有多余的空间时，我们才开始看到它的效果：它将内容相对于父容器的边界对齐。
条件2可帮助我形象化的效果align-items：它使项目彼此相对对齐。
这是一个代码示例。原材料来自Wes Bos的CSS Grid教程（21. Flexbox与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;--it 的效果，它使内容相对于容器的顶部边缘对齐。
这些示例基于flexbox，但是相同的原理也适用于CSS网格。希望这可以帮助 ：）
好吧，我已经在浏览器中检查了它们。
align-content可以改变一个线对行方向或宽度高度为列时，它的值是拉伸，或添加之间或者周围的线空的空间space-between，space-around，flex-start，flex-end values。
align-items可以更改项目在行区域内的高度或位置。当没有包装物品时，它们只有一行，其区域始终被拉伸到伸缩框区域（即使物品溢出），并且align-content对一行没有影响。因此，它对未包装的物品没有影响，并且align-items当所有物品都在一行上时，只能更改物品的位置或拉伸它们。
但是，如果将它们包装起来，则每行中都有多行和多个项目。并且，如果每行的所有项目都具有相同的高度（对于行方向），则该行的高度将等于这些项目的高度，并且更改align-items值不会产生任何影响。
因此，如果要影响align-items包裹物品的时间并且包裹物品具有相同的高度（对于行方向），则必须先使用align-contentStretch值才能扩大线条区域。
我从每个答案和访问博客中学到的都是
横轴和主轴是什么
- 主轴是水平行，交叉轴是垂直列-对于
flex-direction: row - 主轴是垂直列，交叉轴是水平行-对于
flex-direction: column
现在，align-content和align-items
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