У меня есть строка-направление flexbox, вложенная в направлении столбца flexbox, но когда я хочу использовать align-content
в дочернем, это не работает.
Когда я заменяю display:flex
родителя на 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>