我想抓住
<div></div> <div></div> <div></div>
三个连续的div并将其转换为下方.其中红色为div 1,绿色为div 2,蓝色为div 3.
我可以用花车这样做
.div1 { float: left; }
.div2 { float: left; }
.div3 { float: left; }
但我似乎无法让它在flexBox中运行,这可能吗？
解决方法
哈金方法：
*不推荐(我相信你会注意到为什么)
*不推荐(我相信你会注意到为什么)
.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>
合法方法：
*推荐的
.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>
