关于CSS：align-content和align-items有什么区别？


What's the difference between align-content and align-items?

有人可以告诉我align-items和align-content之间的区别吗？

相关讨论

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

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

align-items: center

但是align-content用于多行柔性盒。当项目在一行中时，它无效。它根据其值对齐整个结构。这是align-content: space-around;的示例：
enter image description here

这是带有align-items:center的align-content: space-around;的外观：enter image description here

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

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

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

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

这是一支超酷的笔，可以显示并让您使用flexbox中的几乎所有内容。

相关讨论

我发现示例http://flexboxfroggy.com/非常有用。

这将花费您10-20分钟，在21级时，您会找到问题的答案。它提到：

align-content determines the spacing between lines, while align-items
determines how the items as a whole are aligned within the container.
When there is only one line, align-content has no effect

相关讨论

首先，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教程(21. Flexbox与CSS Grid)。

    • HTML示例：
    1
    2
    3
    4
    5
    6
    7
    8
    9
        Short
        Longerrrrrrrrrrrrrr
        ??
        This is Many Words
        Lorem, ipsum.
        10
        Snickers
        Wes Is Cool
        Short
    • CSS示例：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    .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;无效的情况，因为整个内容块都紧紧地塞在了容器内(没有多余的空间可以重新放置！)

    另外，请注意第二行-查看项目如何在它们之间居中对齐。

    enter image description here

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

    这些示例基于flexbox，但是相同的原理也适用于CSS网格。希望这可以帮助 ：)

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

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

    align-items可以更改项目在行区域内的高度或位置。当没有包装物品时，它们只有一行，其区域始终被拉伸到伸缩框区域(即使物品溢出)，而align-content对一行没有影响。因此，它对未包装的项目没有影响，并且当所有align-items都位于同一行上时，只有align-items可以更改项目的位置或拉伸它们。

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

    因此，如果要在包裹物品时使它们受align-items的影响并且具有相同的高度(对于行方向)，则必须使用具有拉伸值的align-content来扩展线条区域。

    对齐内容

    align-content控制多条线相对于彼此的横轴位置(即，如果flex-direction是row，则为垂直方向；如果flex-direction是column，则为水平方向)。

    (段落的思考线垂直展开，朝顶部堆叠，朝底部堆叠。这在flex-direction行范式下)。

    对齐项目

    align-items控制弯曲元素的单个线的横轴。

    (如果段落中的某行包含一些常规文本和一些较高的文本(如数学方程式，请考虑如何对齐)。在这种情况下，它将是一行中每种文本的底部，顶部还是中心对齐？)

    根据我从这里了解到的：

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

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

    主要区别在于元素的高度不同时！
    然后您可以看到它们在行中如何居中结束开始