我尝试在两个最大的图像上使用flex基础，但是其余图像不适合第二行。我在容器上使用了属性：
.container {
display: flex;
width: 100%;
flex-direction: row;
align-items: flex-start;
flex-grow: 4;
flex-wrap: no-wrap;
align-content: flex-start;
box-sizing: content-box;
}
使用flex如下代码：
.container {
display: flex;
width: 100%;
height: 300px;
}
.container div {
color: white;
height: 100%;
}
.sub-wrap {
flex: 0 0 50%;
display: flex;
width: 100%;
flex-wrap: wrap;
background: blue;
}
.sub-wrap div {
height: 50%;
}
.w-25 {
flex: 0 0 25%;
background: red;
}
.w-small {
flex: 0 0 33%;
}
.w-double {
flex: 0 0 66%;
}<div class="container">
<div class="w-25">1</div>
<div class="sub-wrap">
<div class="w-small">2</div>
<div class="w-double">3</div>
<div class="w-small">4</div>
<div class="w-small">5</div>
<div class="w-small">6</div>
</div>
<div class="w-25">7</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句