html - 为什么 flexbox 在包装元素后不收缩以适应?
问题描述
我希望有一个最大宽度的 flex-box 超出该宽度,但它也适合 flexbox 内任何给定“行”的最大大小。
我现在面临的问题是,任何超出最大宽度然后换行的元素都会导致 flexbox 仍然占据最大宽度。
这是演示该问题的代码笔的链接:
https://codepen.io/heroes-coding/pen/rNaGYmo
这是顶部容器的 html / css:
<div class="holder">
<div class="flexbox">
<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>
</div>
body {
background: black;
}
.holder {
width: 650px;
background: gray;
margin-top: 50px;
}
.flexbox {
display: flex;
background: blue;
max-width: 500px;
width: fit-content;
flex-wrap: wrap;
}
.item {
width: 100px;
height: 50px;
background: red;
border-bottom: 1px dotted white;
border-top: 1px dotted white;
border-right: 1px dotted white;
}
.item.wide {
width: 200px;
}
我想让 flexbox 仍然以 500px 包装,但在包装发生后收缩以适应内容。
解决方案
仅使用 CSS 无法完全实现您的要求。你可以做的是设置每行要显示的最大项目数,然后计算传递给 flexbox 容器的最大宽度:
:root{
--item-width: 100px;
--max-per-row: 4;
--max-width: calc( var(--max-per-row) * ( var(--item-width) + 1px) );
}
使用此代码,您可以将容器的宽度设置为您想要的任何值,例如 500 像素,然后确保最大宽度为 n * flexbox 项目的宽度(边框加上 1),其中 n 是每行所需的项目数。只需确保 flexbox 宽度大于最大宽度即可。
:root{
--item-width: 100px;
--max-per-row: 4;
--max-width: calc( var(--max-per-row) * ( var(--item-width) + 1px) );
}
body {
background: black;
}
.holder {
width: 650px;
background: gray;
margin-top: 50px;
}
.flexbox {
display: flex;
background: blue;
width: 500px;
max-width: var(--max-width);
flex-wrap: wrap;
}
.item {
width: var(--item-width);
height: 50px;
background: red;
border: 1px dotted white;
border-left: none;
}
.item.wide {
width: 200px;
}
<div class="holder">
<div class="flexbox">
<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>
</div>
推荐阅读
- d3.js - 在 BigQuery 中订购大型时间序列数据集以进行导出
- javascript - 仅在用户交互但未获取隐藏输入字段中的值时触发加载recaptcha库
- r - 根据列表项的行拆分列表
- c++ - 为自定义打印调试实现传递任何类型的变量
- python - 每个分位数和预设四分位数的 Python 计数
- python - Pandas Groupby 生成一个单独的数据框
- php - Laravel laratables 如何在附件中使用 id
- mongodb - 如何在 Mongoose 中设置别名
- c# - SqlBulkCopy 数据表,因为它们被添加到数据集中
- jquery - 我想在循环通过json数组后根据条件用jquery更改字体颜色