我想抓住
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。