Question

是否可以创建具有grid-auto-flow: dense属性的大小不同的项目的无序列表？我目前有一个无序的术语列表，这些术语从左到右填充我的页面，而任何不合适的术语都被推到下一行。但是，这在页面的右侧留下了空白，这对于响应式设计是不令人满意的（列表从左开始）。我查看了flexbox的flex-flow属性，但没有发现任何可以模仿grid-auto-flow的东西：密集。

以下是我要引用的简单商品列表的示例：

*,
*: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元素如何完美地围绕content + padding。 max-content和min-content似乎也不适用于模板列或自动行。

任何输入非常感谢。谢谢你！

Answer 1

Flexbox更适合于此-您可以使用 hacky flexbox解决方案，该解决方案通过增长 中的所有 flex项目起作用>弯曲线以填充行中的剩余空间：

在flex: 1 0 auto弹性商品上使用li
使用伪元素填充最后一行中的剩余空间。

请参见下面的演示

*,
*: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>

无序列表的行为类似于网格自动流动密集

1 个答案: