gpt4 book ai didi

html - flex 元素在包裹时在它们之间创建空间

转载 作者:搜寻专家 更新时间:2023-10-31 22:40:49 25 4
gpt4 key购买 nike

<分区>

我正在尝试在具有 display: flex 的容器中添加一些元素。

问题是,当我缩小屏幕时,它会在我没有设置的元素之间产生一个间隙(或者至少我不这么认为)。

我创建了一个 JSFiddle这代表了我的问题。

如您所见,当您缩小屏幕时,第一个和第二个 div 之间有一个蓝色空间。

我该如何解决?

提前致谢!

html,
body {
width: 100%;
height: 100%;
}
#container {
display: flex;
height: 100%;
background-color: blue;
}
.block {
flex: 1;
}
#left {
background-color: green;
}
#center {
display: flex;
flex: 1;
flex-wrap: wrap;
}
#right {
background-color: orange;
}
.flexContainer {
flex: 1;
width: 50%;
min-width: 100px;
max-width: 50%;
height: 150px;
background-color: red;
padding: 10px;
}
.flexDiv {
width: 100%;
height: 100%;
background-color: yellow;
}
<div id="container">
<div id="left" class="block">Left</div>
<div id="center" class="block">
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
</div>
<div id="right" class="block">Right</div>
</div>

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