gpt4 book ai didi

html - Doctype 破坏了 flexbox 布局

转载 作者:太空狗 更新时间:2023-10-29 15:48:55 27 4
gpt4 key购买 nike

<分区>

当我在页面顶部添加声明时,我的 flexbox 布局将折叠,当我删除 doctype 时,它​​会按预期工作。 chrome/firefox/ie 出现问题。

.grid {
height: 100%;
display: flex;
flex-flow: column nowrap;
flex-grow: 1;
border: 1px solid black;
}
.row {
width: 100%;
display: flex;
flex-flow: row nowrap;
flex-grow: 1;
}
.cell {
flex-grow: 1;
border: 1px solid black;
}
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>

https://plnkr.co/edit/jKklf2zeYBjOgTsSQnvr

它应该是什么样子:

grid

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