align-content在弹性项目上不起作用 [英] align-content not working on flex items
问题描述
我在行方向弹性框中嵌套了行方向弹性框，但是当我想在子级中使用 align-content 时，它不起作用。
I have a row-direction flexbox nested in a column-direction flexbox, but when I want to use align-content in the child, it doesn't work.
当我将父母的 display：flex 替换为 display：block ，它起作用。
When I replace display:flex of the parent by a display:block, it works.
在下面的代码中，我们可以看到 .row align-content：flex-end; 不起作用。但是，如果我将 .column display：flex; 替换为 display：block; ， align-content：flex-end; 有效。
In the code below, we can see that .row align-content: flex-end; doesn't work. But if I replace the .column display: flex; with display: block;, the align-content: flex-end; works.
是否可以修复
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>
推荐答案
当将主flex容器切换到时，仅仅是浏览器的错误。 align-content 起作用的事实显示：块
The fact that align-content "works" when the primary flex container is switched to display: block is simply a browser bug.
根据需要将flex项移到底部，但仅在Firefox中。
It shifts the flex items to the bottom, as desired, but only in Firefox.
在Chrome中，它什么也没做，这是正确的行为（根据规格）。
In Chrome it doesn't do anything, which is the correct behavior (per the spec).
IE11会将项目移至顶部（也是不符合标准）。
And in IE11 it shifts the items to the top (also nonconformant).
这些错误和不一致之处不应该作为指导，因为它们无助于解释 align-content 属性的工作原理。
These are bugs and inconsistencies that shouldn't be relied upon for guidance, as they don't help to explain how the align-content property works.
单行伸缩容器 ，与问题中的 align-content 一样。要使用的属性是 align-items 。
In a single line flex container, like the one in the question, align-content has no effect. The property to use is align-items.
在 多行flex容器中 ，要使用的属性是 align-content 。
此外， align-self 属性与 align-items 密切相关。一个旨在替代另一个。它们都一起起作用。
Also, the align-self property is closely related to align-items. One is designed to override the other. They both function together.
根据规范：
align-items 设置所有flex容器项目（包括匿名flex项目）的默认对齐方式。 align-self 允许针对单个弹性项目覆盖此默认对齐方式。
align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items.
align-content 属性在横轴上有多余空间时在
flex容器内对齐flex容器的行，类似于
如何 justify-content 在主轴内对齐各个项目。
注意，此属性对单行伸缩容器没有影响。
The align-content property aligns a flex container’s lines within the
flex container when there is extra space in the cross-axis, similar to
how justify-content aligns individual items within the main-axis.
Note, this property has no effect on a single-line flex container.
在这个问题上，请忘记 align-content 。
只需使用 align-items：flex-end （或 align-self：在： span 上的flex-end
Simply use align-items: flex-end (or align-self: flex-end on the 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>
这篇关于align-content在弹性项目上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
