我试图用 flex 实现以下布局,但似乎无法实现:
* {
box-sizing: border-box;
}
.box {
border: 1px solid black;
width: 50%;
padding-top: 25%;
float: left;
}
.box:first-child {
padding-top: 50%;
}
.box:nth-last-child(-n+2) {
width: 25%;
}
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
如果我尝试使用 flex-direction 行,它会将最后两个框包裹在第一个左边的框下
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box {
border: 1px solid black;
width: 50%;
padding-top: 25%;
}
.box:first-child {
padding-top: 50%;
}
.box:nth-last-child(-n+2) {
width: 25%;
}
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
如果我使用 flex 方向列,我会靠近但必须设置一个高度,这意味着我会失去响应能力
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height:400px;
width:100%;
}
.box {
border: 1px solid black;
width: 50%;
padding-top: 25%;
}
.box:first-child {
padding-top: 50%;
}
.box:nth-last-child(-n+2) {
width: 25%;
}
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
有没有办法在没有固定高度或改变 html 结构的情况下使用 flex 实现这种布局?
最佳答案
使用 flexbox 你可以考虑一些hack 来近似这个。一个技巧是有两行(保持行方向)并在第一个元素上使用负边距使其与第二行重叠:
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box {
outline: 1px solid black;
width: 50%;
padding-top: 25%;
}
.box:first-child {
padding-top: 25%;
margin-bottom:-25%;
}
.box:nth-last-child(-n+2) {
width: 25%;
}
.box:nth-child(3) {
margin-left:auto;
}
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
关于css - 柔性砌体效果未正确包裹,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54632489/