flexbox 项目不会扩展到它们的最大宽度
Posted
技术标签:
【中文标题】flexbox 项目不会扩展到它们的最大宽度【英文标题】:flexbox items do not expand to their max width 【发布时间】:2021-10-05 08:46:36 【问题描述】:我希望第一行上的弹性项目收缩到由弹性基础定义的某个点,然后包装,我希望它们增长直到达到最大宽度,然后展开,但它们会更快地开始展开。是什么让它们在 260 像素左右展开https://codepen.io/sevgin0954/pen/mdmxZzx
<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;
【问题讨论】:
【参考方案1】:Flexbox 引入了auto
作为min-width
的初始值。当溢出可见时,自动强制弹性项目增长,使其内容不会溢出。
因此,您可以使用min-width: 0
但是,它不会保持其纵横比。要解决这个问题,您可以使用
object-fit
.container
object-fit: contain;
display: flex;
flex-wrap: wrap;
这将保持项目的预期比率,然后您可以确保它遵循您预期的结果。
【讨论】:
以上是关于flexbox 项目不会扩展到它们的最大宽度的主要内容,如果未能解决你的问题,请参考以下文章