我正在尝试创建一个具有两列的简单 flexbox 网格,但是可以选择将其中一个子项声明为“特色”,使其成为正常子项高度的两倍,因此给出以下标记:
<div class="container">
<div class="child featured">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
</div>
但是我似乎无法让它工作,所有的 child 都只是堆叠在有特色的 child 下面,而不是填充可用空间。
我的基本 CSS 是:
.container {
display: flex;
flex-flow: column wrap;
}
.child {
flex: 1 0 50%;
height: 50vh;
max-width: 50%;
}
.child.featured {
height: 100vh;
}
知道我做错了什么,或者是否有更好的方法(不求助于 JavaScript)?
最佳答案
Flexbox 不支持这样的网格。但是您可以使用 float 来做到这一点:
.child {
float: left;
height: 50vh;
width: 50%;
outline: 1px solid red;
}
.child.featured {
height: 100vh;
}
<div class="container">
<div class="child featured">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
</div>
关于html - 在 flexbox 网格中使一些元素成为高度的两倍,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44308158/