我试图创建一个自动调整大小的flexbox，其中包含按列组织的 Package 项目，但宽度与框不匹配.
下面是html body：
<body>
<div id="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>字符串
我的CSS文件：
* {
border: none;
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
}
#flex {
position: absolute;
display: flex;
flex-flow: column wrap;
gap: 10px;
background: green;
height: 500px;
}
.item {
height: 80px;
width: 80px;
border-radius: 20px;
background: red;
}型
x1c 0d1x的数据
正如你所看到的，#flex width是80 px，一个项目的宽度。
现在，如果我将一些属性更改为：
#flex {
flex-flow: row wrap;
height: auto;
width: 500px;
}型
的
1条答案
按热度按时间wz8daaqr1#
只需给予
width: 50%到#flex和删除width从.item和问题将得到解决！并且还改变flex-flow: column wrap;