<分区>
html - CSS定位与不同顺序的div的flex
我正在尝试使用 Flexbox 获得特定的 css 布局(作为 css 网格布局的回退)，但实际上我不确定是否有可能获得我想要的。
我有以下 HTML 结构:
<div class="container">
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
<div class="div3">DIV 3</div>
</div>
这就是我想要实现的(使用 css 网格很容易):
除此之外，我希望 div 1 和 3 固定在滚动条上，而 div2 内容可滚动。
我只是想知道是否有可能完成这项工作；我已经尝试了很多 flex 设置，但我做不到。
最佳答案
如果您的容器具有固定高度(我假设它是视口(viewport)的 100%)，您可以使用带环绕和顺序的列方向来实现您的布局:
html, body {
margin:0;
height:100%;
color:white;
}
.container {
height:100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.div1,
.div3 {
height: 50%;
width: 30%;
}
.div1 {
background: red;
}
.div2 {
max-height:100%; /* make overflow scroll */
overflow:auto;
flex-grow: 1; /* make div fill height */
width: 70%;
order: 3; /* put this div at the end */
background: grey;
}
.div3 {
order: 2; /* put this div below div1 */
background: blue;
}<div class="container">
<div class="div1">DIV 1</div>
<div class="div2">DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br></div>
<div class="div3">DIV 3</div>
</div>关于html - CSS定位与不同顺序的div的flex，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51748059/