有没有办法让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>
答案 0 :(得分:2)
使block-right
的宽度为33%
,在左边的宽度为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>