即使在包裹后,也可以弯曲相同宽度的物品
有可能像这样制作一个纯CSS解决方案:
物品有一些min-width
。
它们应该动态增长以填充所有容器宽度,然后换行到新行
列表中的所有项目应具有相同的宽度。
.container { display: flex; flex-wrap: wrap;}.item { background: yellow; min-width: 100px; height: 20px; text-align: center; border: 1px solid red; flex-grow: 1;}
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div></div>
这是一个小提琴演示。