gpt4 book ai didi

html - 如何防止 flex 元素在包装时拉伸(stretch)

转载 作者:行者123 更新时间:2023-11-28 14:36:32 24 4
gpt4 key购买 nike

<分区>

我正在尝试使用 flexbox 为我的应用程序创建一个网格系统。我在 flex 容器上使用 flex-wrap: wrap 时遇到问题。

在我下面的示例中,是否可以在不指定高度值的情况下阻止我的页眉向下拉伸(stretch)一半?我希望标题与其中的内容一样高,而侧边栏和内容可以拉伸(stretch)。

如有任何帮助,我们将不胜感激。

html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.cell1 {
flex: 1 1 100%;
background-color: #eee;
}
.cell2 {
flex: 1 0 25%;
background-color: #ddd;
}
.cell3 {
flex: 1 0 75%;
background-color: #ccc;
}
<div class="container">
<div class="cell1">
Header should be collapsed
</div>
<div class="cell2">
Sidebar
</div>
<div class="cell3">
Content
</div>
</div>

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com