[英]Nested flex items equal width
有没有办法让Block1,Block2和Block3与我下面的HTML结构具有相同的宽度? 我一直在尝试使用flex: 1
,这导致有2个50%的列。
.container { display: flex; align-items: flex-start; } .blocks { display: flex; flex: 1; } .blocks-left { align-items: center; border: 2px solid purple; } .blocks-right { } .block { flex: 1; } #block-1 { background: red; height: 100px; } #block-2 { background: blue; height: 200px; } #block-3 { background: green; height: 400px; }
<div class="container"> <div class="blocks blocks-left"> <div id="block-1" class="block">Block1</div> <div id="block-2" class="block">Block2</div> </div> <div class="blocks blocks-right"> <div id="block-3" class="block">Block3</div> </div> </div>
使block-right
的宽度为33%
,左block-right
的宽度为66%
。 为此,您可以简单地使用flex:2
和flex:1
以便左侧块的宽度是右侧块的两倍。
.container { display: flex; align-items: flex-start; } .blocks { display: flex; flex: 1; } .blocks-left { align-items: center; border: 2px solid purple; flex:2; } .blocks-right { flex:1; } .block { flex: 1; } #block-1 { background: red; height: 100px; } #block-2 { background: blue; height: 200px; } #block-3 { background: green; height: 400px; }
<div class="container"> <div class="blocks blocks-left"> <div id="block-1" class="block">Block1</div> <div id="block-2" class="block">Block2</div> </div> <div class="blocks blocks-right"> <div id="block-3" class="block">Block3</div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.