我希望第一行的 flex 项目收缩到由 flex 基础定义的某个点,然后进行包装,我希望它们增长到达到最大宽度,然后展开,但它们会更快地开始展开。是什么让它们在 260 像素左右展开
How to expand material nested tree to specific node?
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1;
flex-basis: 170px;
max-width: 400px;
height: 100px;
background-color: green;
border: 1px solid black;
margin: 10px;
}
答案 0 :(得分:0)
Flexbox 引入 auto
作为 min-width
的初始值。当溢出可见时,该自动强制弹性项目增长,使其内容不会溢出。
因此,您可以使用 min-width: 0
但是,它不会保持其纵横比。要解决这个问题,您可以使用
object-fit
.container {
object-fit: contain;
display: flex;
flex-wrap: wrap;
}
这将保持项目的预期比率,然后您可以确保它符合您的预期结果。