Html 对齐内容不适用于弹性项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37226787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
align-content not working on flex items
提问by Jean-Louis De La Marre
I have a row-direction flexbox nested in a column-direction flexbox, but when I want to use align-contentin the child, it doesn't work.
我有一个行方向 flexbox 嵌套在一个列方向 flexbox 中，但是当我想align-content在子项中使用时，它不起作用。
When I replace display:flexof the parent by a display:block, it works.
当我用display:flexa替换父级时display:block，它会起作用。
In the code below, we can see that .rowalign-content: flex-end;doesn't work. But if I replace the .columndisplay: flex;with display: block;, the align-content: flex-end;works.
在下面的代码中，我们可以看到这.rowalign-content: flex-end;不起作用。但是，如果我取代.columndisplay: flex;用display: block;的align-content: flex-end;作品。
Is it possible to fix this, please?
请问可以解决这个问题吗？
body {
background-color: grey;
}
.column {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: stretch;
background-color: green;
}
.row {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: flex-end;
align-items: center;
background-color: red;
}
.row-test {
min-height: 200px;
}
span {
width: 30%;
background-color: orange;
}<body class="column">
<section class="row row-test">
<span>Test Test Test Test Test Test Test Test Test</span>
<span>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</span>
</section>
</body>回答by Michael Benjamin
The fact that align-content"works" when the primary flex container is switched to display: blockis simply a browser bug.
align-content当主 flex 容器切换到时“有效”的事实display: block只是浏览器错误。
It shifts the flex items to the bottom, as desired, but only in Firefox.
它根据需要将 flex 项目移动到底部，但仅限于 Firefox。
In Chrome it doesn't do anything, which is the correct behavior (per the spec).
在 Chrome 中它什么也不做，这是正确的行为（根据规范）。
And in IE11 it shifts the items to the top (also nonconformant).
在 IE11 中，它将项目移到顶部（也是不符合的）。
These are bugs and inconsistencies that shouldn't be relied upon for guidance, as they don't help to explain how the align-contentproperty works.
这些错误和不一致不应作为指导，因为它们无助于解释该align-content属性的工作原理。
In a single line flex container, like the one in the question, align-contenthas no effect. The property to use is align-items.
在单行 flex container 中，就像问题中的那个一样，align-content没有效果。要使用的属性是align-items。
In a multi-line flex container, the property to use is align-content.
在多行 flex 容器中，要使用的属性是align-content。
Also, the align-selfproperty is closely related to align-items. One is designed to override the other. They both function together.
此外，该align-self属性与 密切相关align-items。一个旨在覆盖另一个。它们共同发挥作用。
From the spec:
从规范：
8.3. Cross-axis Alignment: the
align-itemsandalign-selfproperties
align-itemssets the default alignment for all of the flex container's items, including anonymous flex items.align-selfallows this default alignment to be overridden for individual flex items.8.4. Packing Flex Lines: the
align-contentpropertyThe
align-contentproperty aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to howjustify-contentaligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.
8.3. 横轴对齐：
align-items和align-self属性
align-items设置所有弹性容器项目的默认对齐方式，包括匿名弹性项目。align-self允许为单个 flex 项目覆盖此默认对齐方式。8.4. 包装 Flex Lines：
align-content属性
align-content当横轴中有额外空间时，该属性会在 flex 容器内对齐 flex 容器的线条，类似于如何justify-content在主轴内对齐单个项目。 请注意，此属性对单行 flex 容器没有影响。
In terms of this question, forget about align-content. It's useless (unless your flex items wrap).
就这个问题而言，忘记align-content。这是没用的（除非你的弹性项目包装）。
Simply use align-items: flex-end(or align-self: flex-endon the span's):
只需使用align-items: flex-end（或align-self: flex-end在span's 上）：
body {
background-color: grey;
}
.column {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: stretch;
background-color: green;
}
.row {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: flex-end; /* will work when items have wrapped */
align-items: flex-end; /* adjusted; works when items in one line */
background-color: red;
}
.row-test {
min-height: 200px;
}
span {
width: 30%;
background-color: orange;
/* align-self: flex-end; this would also work on single line container */
}<body class="column">
<section class="row row-test">
<span>Test Test Test Test Test Test Test Test Test</span>
<span>Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test</span>
</section>
</body>回答by rony36
Maybe you want to use justify-contentinstead of align-content
也许你想用justify-content而不是align-content
回答by Krishna Rana
You need to add flex-wrap: wrap; to work align-content
您需要添加 flex-wrap: wrap; 工作对齐内容
回答by Billy Mitchell
Sometimes you need to set a height on the parent container fo your flex items to get align-content to work.
有时你需要为你的 flex 项目在父容器上设置一个高度以使 align-content 工作。
