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

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

提问by Dinh

Can anybody show me the difference between align-itemsand align-content?

任何人都可以告诉我之间的差异align-items和align-content？

回答by Asim K T

The align-itemsproperty of flex-box aligns the items inside a flex container along the cross axis just like justify-contentdoes along the main axis. (For the default flex-direction: rowthe cross axis corresponds to vertical and the main axis corresponds to horizontal. With flex-direction: columnthose two are interchanged respectively).

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

Here's an example of how align-items:centerlooks:

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

But align-contentis for multi line flexible boxes. It has no effect when items are in a single line. It aligns the whole structure according to its value. Here's an example for align-content: space-around;:

但align-content适用于多线柔性盒。当项目在一行中时它不起作用。它根据其值对齐整个结构。下面是一个例子align-content: space-around;：

And here's how align-content: space-around;with align-items:centerlooks:

这是如何align-content: space-around;搭配align-items:center外观：

Note the 3rd box and all other boxes in first line change to vertically centered in that line.

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

Here are some codepen links to play with:

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

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

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

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

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

Here'sa super cool pen which shows and lets you play with almost everything in flexbox.

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

回答by Alireza Fattahi

I find the example http://flexboxfroggy.com/very useful.

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

It will take you 10-20 minutes and at level 21 you will find the answer to your question. It mentioned:

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

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

align-content确定行之间的间距，而align-items确定项目作为一个整体如何在容器内对齐。只有一行时，align-content没有作用

回答by Uday Hiwarale

First, align-itemsis for items in a single row. So for a single row of elements on main axis, align-itemswill align these items respective of each other and it will start with fresh perspective from the next row.

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

Now, align-contentdoesn't interfere with items in a row but with rows itself. Hence, align-contentwill try to align rows with respect to each other and flex container.

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

Check this fiddle : https://jsfiddle.net/htym5zkn/8/

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

回答by Shan Dou

I had the same confusion. After some tinkering based on many of the answers above, I can finally see the differences. In my humble opinion, the distinction is best demonstrated with a flex container that satisfies the following two conditions:

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

1. The flex container itself has a height constraint (e.g., min-height: 60rem) and thus can become too tallfor its content
2. The child items enclosed in the container have uneven heights

1. flex 容器本身有一个高度限制（例如，min-height: 60rem），因此对于它的内容来说可能变得太高
2. 包裹在容器中的子物品高度不均匀

---

---

Condition 1helps me understand what contentmeans relative to its parent container. When the content is flush with the container, we will not be able to see any positioning effects coming from align-content. It is only when we have extra space along the cross axis, we start to see its effect: It aligns the content relative to the boundaries of the parent container.

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

Condition 2helps me visualize the effects of align-items: it aligns items relative to each other.

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

---

---

Here is a code example. Raw materials come from Wes Bos' CSS Grid tutorial(21. Flexbox vs. CSS Grid)

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

• Example HTML:

• 示例 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>

• Example CSS:

• 示例 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;
}

---

---

Example 1: Let's narrow the viewport so that the content is flush with the container. This is when align-content: flex-start;has no effects since the entire content block is tightly fit inside the container (no extra room for repositioning!)

示例 1：让我们缩小视口，使内容与容器齐平。这是align-content: flex-start;没有影响的时候，因为整个内容块都紧紧地装在容器内（没有额外的重新定位空间！）

Also, note the 2nd row--see how the items are center aligned among themselves.

另外，请注意第 2 行——查看项目之间如何居中对齐。

Example 2: As we widen the viewport, we no longer have enough content to fill the entire container. Now we start to see the effects of align-content: flex-start;--it aligns the content relative to the top edge of the container.

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

---

---

These examples are based on flexbox, but the same principles are applicable to CSS grid. Hope this helps :)

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

回答by TheNegative

Well I have examined them on my browser.

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

align-contentcan change a line's height for row direction or width for column when it's value is stretch, or add empty space between or around the lines for space-between, space-around, flex-start, flex-end values.

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

align-itemscan change items height or position inside the line's area. When items are not wrapped they have only one line which it's area is always stretched to the flex-box area (even if the items overflow), and align-contenthas no effect on a single line. So it has no effect on items that are not wrapped and only align-itemscan change items position or stretch them when all of them are on a single line.

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

However, if they are wrapped you have multiple lines and items inside each line. And if all items of each line have the same height (for row direction) that line's height will be equal to those items height and you don't see any effect by changing align-itemsvalue.

但是，如果它们被包裹，则每行中有多个行和项目。如果每行的所有项目都具有相同的高度（对于行方向），那么该行的高度将等于这些项目的高度，并且您看不到更改align-items值的任何影响。

So if you want to affect items by align-itemswhen your items are wrapped and have the same height (for row direction) first you have to use align-contentwith stretch value in order to expand the lines area.

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

回答by ahnbizcad

align-content

对齐内容

align-contentcontrols the cross-axis (i.e. vertical direction if the flex-directionis row, and horizontal if the flex-directionis column) positioning of multiplelines relative to each other.

align-content控制横轴（即垂直方向，如果flex-direction是row，和水平如果flex-direction是column）的定位的多个线相对于彼此。

(Think lines of a paragraph being vertically spread out, stacked toward the top, stacked toward the bottom. This is under a flex-directionrow paradigm).

（想想一个段落的线条垂直展开，朝顶部堆叠，朝底部堆叠。这是flex-direction在行范式下）。

align-items

对齐项目

align-itemscontrols the cross-axis of an individual line of flex elements.

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

(Think how an individual line of a paragraph is aligned, if it contains some normal text and some taller text like math equations. In that case, will it be the bottom, top, or center of each type of text in a line that will be aligned?)

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

回答by bajran

What I have learned from every answer and visiting the blog is

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

what is the cross axis and main axis

什么是横轴和主轴

• main axis is horizontal row and cross axis is vertical column - for flex-direction: row
• main axis is vertical column and cross axis is horizontal row - for flex-direction: column

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

Now align-content and align-items

现在对齐内容和对齐项目

align-contentis for the row, it works if the container has (more than one row) Properties of align-content

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-itemsis for the items in row Properties of align-items

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

For more reference visit to flex

如需更多参考，请访问flex

回答by simi

The main difference is when the height of the elements are not the same! Then you can see how in the row, they are all center\end\start

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

回答by Goldenmoon

according to what I understood from here:

根据我从这里了解到的：

when you use align-item or justify-item, you are adjusting "the content inside a grid item along the?column axis or row?axis respectively.

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

But: if you use align-content or justify-content, you are setting the position a grid along the column axis or the?row?axis. it occurs when you have a grid in a bigger container and width or height are inflexible (using px).

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