我正在努力
<div></div>
<div></div>
<div></div>
三个连续的 div 并将其变成下面。其中红色是 div 1,绿色是 div 2,蓝色是 div 3。
我可以用花车来做到这一点,比如
.div1 { float: left; }
.div2 { float: left; }
.div3 { float: left; }
但我似乎无法让它在 flexbox 中工作,这可能吗?
最佳答案
合法方法:
*推荐
.flex-row {
flex-direction: row;
display: flex;
}
.flex-column {
flex-direction: column;
display: flex;
}
.flex-body {
display: flex;
}
.flex-body div:not([class*="flex"]) {
border: 1px solid white;
flex: 1 1 200px;
width: 300px;
}
<div class="flex-body">
<div class="flex-row">
<div style="background: #0980cc;"></div>
</div>
<div class="flex-column">
<div style="background: #09cc69;"></div>
<div style="background: #cc092f;"></div>
</div>
</div>
Hackish 方法:
*不推荐(我相信你会注意到原因)
.flex-body {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: flex-end;
align-content: stretch;
align-items: stretch;
transform: rotate(90deg);
max-width: 500px;
margin: auto;
}
.flex-body div {
border: 1px solid white;
height: 300px;
flex: 1 1 200px;
}
.flex-body div:last-of-type {
flex: 1 1 300px;
height: 300px;
}
<div class="flex-body">
<div style="background: #0980cc;"></div>
<div style="background: #09cc69;"></div>
<div style="background: #cc092f;"></div>
</div>
关于html - Flexbox 3 div,两列,一列两行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43056180/