我正在使用 Flexbox 为我的网站制作布局,其中我希望左侧的两个项目 item-1
和 item-3
相互堆叠,右侧的一个项目占用容器的整个高度。我遇到的问题是,当我将 item-2
的高度更改为 100%
时,flex 容器的高度也会发生变化。
* {
margin: 10px;
}
.container {
background: grey;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item-1 {
width: 30%;
background: blue;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px
}
.item-2 {
width: 60%;
background: green;
height: 100px;
border: 1px solid black;
font-size: 18px;
line-height: 100px;
text-align: center;
margin: 10px
}
.item-3 {
width: 30%;
background: blue;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px
}
<div class="container">
<div class="item-1">Item-1</div>
<div class="item-2">Item-2</div>
<div class="item-3">Item-3</div>
</div>
有很多关于堆栈溢出的答案,比如 this 一个关于类似问题的答案,但他们使用 <hr>
或空容器作为换行符,给它们 width: 100%; height: 0
。我试过了,但没有一个对我的情况有效。
这是我想要的布局。