别名内容和别名项之间有什么区别?

Can anybody show me the difference between align-items and align-content?

谁能告诉我aligni -items和aligni -content之间的区别吗?

7 个解决方案

#1

150

The align-items property of flex-box aligns the items inside a flex container along the cross axis just like justify-content does along the main axis. (For the default flex-direction: row the cross axis corresponds to vertical and the main axis corresponds to horizontal. With flex-direction: column those two are interchanged respectively).

flex-box的aligni -items属性沿着横轴对齐flex容器中的项目，就像equfy -content沿着主轴对齐一样。(对于默认的弯曲方向:横轴对应于垂直方向，主轴与水平方向对应。使用弹性方向:列这两个分别被互换)。

Here's an example of how align-items:center looks:

下面是一个例子，说明了aligni -items:center:

But align-content is 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;:

但aligni内容是为多行灵活的盒子。当项目在一行时，它没有任何影响。它根据它的值对整个结构进行对齐。这里有一个align-content的例子:空格;

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

这里是align-content:空格;对齐项目:中心是:

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

注意第3个方框和第一行中的所有其他方框都是在这条直线上以垂直为中心的。

Here are some codepen links to play with:

下面是一些代码页链接:

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

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

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

这是一支超级酷的笔，它可以显示和让你玩flexbox几乎所有的东西。

#2

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

首先，aligni -items用于单行中的项。因此，对于主轴上的一行元素，align-items将把这些项彼此对齐，它将从下一行的新视角开始。

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

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

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

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

#3

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

aligni -content确定行之间的间隔，而aligni -items确定作为整体的项如何在容器中对齐。当只有一行时，align-content没有任何效果

#4

Well I have examined them on my browser.

我在浏览器里检查过了。

align-content can 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内容可以在行方向或列宽度的值被拉伸时更改行的高度，或者在行之间或线的周围添加空格，用于空格、空格、flex-start、flex-end值。

align-items can 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-content has no effect on a single line. So it has no effect on items that are not wrapped and only align-items can change items position or stretch them when all of them are on a single line.

alignn -项目可以更改项目高度或线内的位置。当项目没有被包装时，它们只有一行，它的区域总是延伸到浮动框区域(即使项目溢出)，并且aligni内容对单个行没有影响。因此，它对没有包装的项目没有影响，只有对象可以在所有项目都在一行上时更改它们的位置或拉伸它们。

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

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

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

因此，如果您想要通过对齐项来影响项目，当您的项目被包装并具有相同的高度(用于行方向)时，首先您必须使用具有拉伸值的aligni内容来扩展线条区域。

#5

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.

当您使用aligni -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).

但是:如果您使用aligni -content或rationfy -content，那么您正在沿着列轴或行轴设置网格的位置。当您在一个较大的容器中有一个网格，并且宽度或高度是不灵活的(使用px)时，就会发生这种情况。

#6

align-content

align-content

align-content controls the cross-axis (i.e. vertical direction if the flex-direction is row, and horizontal if the flex-direction is column) positioning of multiple lines relative to each other.

aligni -content控制多条线相对于其他线的横轴(即垂直方向为行，水平方向为列)定位。

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

(想象一下，一段文字垂直展开，朝上堆，朝下堆。这是在浮动方向行范式下)。

align-items

对齐项目

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

aligni -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?)

(想象一下，如果一段文字包含了一些普通的文字和一些更高的文字，比如数学方程，那么它是如何对齐的。在这种情况下，每一种文本的底部、顶部或中心是否会对齐?

#7

-1

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

主要的区别是元素的高度不一样!然后你可以看到在行中，它们都是中心\结束\开始

#1

150