无序列表，就像网格自动流密集 [英] Unordered list that acts like grid-auto-flow dense

问题描述

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

Is it possible to create an unordered list of different sized items that have the properties of grid-auto-flow: dense? I currently have an unordered list of terms that fills my page from left and right and any term that can't fit gets pushed to the next line. However, this leaves gaps on the right side of the page which is not plesent for responsive designs (the list starts from the left). I looked at the flex-flow properties of flexbox, but I did not find anything that can mimic grid-auto-flow: dense.

这是我所指的简单项目列表的示例:

Here's an example of the simple item list I am referring to:

*,
*: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 似乎也不适用于模板列或自动行.

I have experimented with grid-template-columns and grid-auto-rows, but I cant seem to replicate how the li element wraps perfectly around the content+padding. max-content and min-content don't seem to work with template columns or auto-rows either.

非常感谢任何输入.非常感谢！

Any input greatly appreciated. Thanks a bunch!

推荐答案

Flexbox 更适合于此 - 您可以使用 hacky flexbox 解决方案，它通过 增长 all 起作用flex line 中的 flex items 填充行中的剩余空间:

Flexbox is more suited for this - you can use a hacky flexbox solution that works by growing all the flex items in a flex line to fill the remaining space in the row:

• 在 li 弹性项目

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

use a pseudo element that fills the remaining space in the last row.

见下面的演示:

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

这篇关于无序列表，就像网格自动流密集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！