css - 类似于 grid-auto-flow dense 的无序列表

Question

是否可以创建具有grid-auto-flow: dense 属性的不同大小元素的无序列表？我目前有一个无序的术语列表，从左到右填满我的页面，任何不适合的术语都会被推到下一行。但是，这会在页面右侧留下空隙，这对于响应式设计来说是不利的(列表从左侧开始)。我查看了 flexbox 的 flex-flow 属性，但没有发现任何可以模仿 grid-auto-flow: dense 的东西。

这是我所指的简单元素列表的示例:

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 20px;
  font-family: 'Open Sans', 'sans-serif';
  background-color: #fff;
  color: #444;
}

.interests {
  grid-column: 1 / -1;
  padding: 0;
  margin: 0;
}

.interests li {
  list-style-type: none;
  display: inline-block;
  text-align: center;
  padding: 0 10px;
  border: 1px solid black;
  margin: 0 4px 8px 0;
  /*top,right,bottom,left*/
  cursor: default;
}

<ul class="interests">
  <li>Legumes</li>
  <li>Edible plants</li>
  <li>Edible fungi</li>
  <li>Edible nuts</li>
  <li>seeds</li>
  <li>Baked goods</li>
  <li>Breads</li>
  <li>Dairy products</li>
  <li>Eggs</li>
  <li>Meat</li>
  <li>Cereals</li>
  <li>Seafood</li>
  <li>Staple foods</li>
  <li>Prepared foods</li>
  <li>Appetizers</li>
  <li>Condiments</li>
  <li>Confectionery</li>
  <li>Convenience foods</li>
  <li>Desserts</li>
  <li>Dips</li>
  <li>Dried foods</li>
  <li>Dumplings</li>
  <li>Fast food</li>
  <li>Fermented foods</li>
  <li>chinese food</li>
  <li>Kosher food</li>
  <li>Noodles</li>
  <li>Pies</li>
  <li>Salads</li>
  <li>Sandwiches</li>
  <li>Sauces</li>
  <li>Snack foods</li>
  <li>Soups</li>
  <li>Stews</li>
</ul>

我已经尝试过 grid-template-columns 和 grid-auto-rows，但我似乎无法复制 li 元素完美包裹内容+填充。 max-content 和 min-content 似乎也不适用于模板列或自动行。

非常感谢任何输入。非常感谢!

Answer 1

Flexbox 更适合这种情况 - 您可以使用 hacky flexbox 解决方案，该解决方案通过 growing flex items 来工作>flex line 填充行中的剩余空间:

• 在 li flex 项上使用 flex: 1 0 auto

• 使用伪元素填充最后一行的剩余空间。

请看下面的演示:

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 20px;
  font-family: 'Open Sans', 'sans-serif';
  background-color: #fff;
  color: #444;
}

.interests {
  display: flex; /* wrapping flexbox */
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.interests li {
  list-style-type: none;
  display: inline-block;
  text-align: center;
  padding: 0 10px;
  border: 1px solid black;
  margin: 0 4px 8px 0;
  cursor: default;
  flex: 1 0 auto; /* added */
}

.interests:after {
  content: '';
  display: block;
  flex: 999; /* grow by a large number */
}

<ul class="interests">
  <li>Legumes</li>
  <li>Edible plants</li>
  <li>Edible fungi</li>
  <li>Edible nuts</li>
  <li>seeds</li>
  <li>Baked goods</li>
  <li>Breads</li>
  <li>Dairy products</li>
  <li>Eggs</li>
  <li>Meat</li>
  <li>Cereals</li>
  <li>Seafood</li>
  <li>Staple foods</li>
  <li>Prepared foods</li>
  <li>Appetizers</li>
  <li>Condiments</li>
  <li>Confectionery</li>
  <li>Convenience foods</li>
  <li>Desserts</li>
  <li>Dips</li>
  <li>Dried foods</li>
  <li>Dumplings</li>
  <li>Fast food</li>
  <li>Fermented foods</li>
  <li>chinese food</li>
  <li>Kosher food</li>
  <li>Noodles</li>
  <li>Pies</li>
  <li>Salads</li>
  <li>Sandwiches</li>
  <li>Sauces</li>
  <li>Snack foods</li>
  <li>Soups</li>
  <li>Stews</li>
</ul>