Jea*_*rre 11 html css css3 flexbox
我有一个行方向flexbox嵌套在列方向flexbox中,但是当我想align-content在子项中使用它时,它不起作用.
当我用display:flexa 替换父级时display:block,它可以工作.
在下面的代码中,我们可以看到这.row align-content: flex-end;不起作用.但是,如果我取代.column display: flex;用display: block;的align-content: flex-end;作品.
可以解决这个问题吗？
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>Mic*_*l_B 10
align-content当主要Flex容器切换到"工作" 这一事实display: block只是一个浏览器错误.
它会根据需要将弹性项目移动到底部,但仅限于Firefox.
在Chrome中,它没有做任何事情,这是正确的行为(根据规范).
在IE11中,它将项目转移到顶部(也是不一致的).
这些是不应该依赖的错误和不一致的指导,因为它们无助于解释align-content财产的运作方式.
在单行Flex容器中,与问题中的容器一样,align-content没有任何效果.要使用的财产是align-items.
在多行Flex容器中,要使用的属性是align-content.
此外,该align-self财产密切相关align-items.一个旨在覆盖另一个.它们都起作用.
从规格:
8.3.交叉轴对齐:
align-items和align-self属性
align-items设置所有Flex容器项的默认对齐方式,包括匿名弹性项.align-self允许为各个弹性项重写此默认对齐方式.8.4.包装Flex Lines:
align-content属性
align-content当横轴上有额外的空间时,属性会在flex容器内对齐flex容器的线,类似于justify-content在主轴内对齐各个项的方式. 请注意,此属性对单行Flex容器没有影响.
就这个问题而言,忘了align-content.它没用(除非你的flex项目包装).
只需使用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>