时间戳

首页 > 解决方案 > 同等大小的 flex-grow 项目

css - 同等大小的 flex-grow 项目

问题描述

我正在寻找一种方法来使弯曲项目的最后一行中的元素与整行中的元素相同——而不使用 JS。Flexbox 似乎很有希望提供一个解决方案，但问题是，如果有额外的空间，最后一行中的项目会更宽。有一个更好的方法吗？

.flex-container {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  min-width: 100px;
  max-width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  flex-grow: 1;
}
<!DOCTYPE html>
<html>
<body>
<div class="flex-container">
  <div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div>
</div>
</body>
</html>

标签： cssresponsive-designflexbox

解决方案

推荐阅读