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

问题描述

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

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元素如何完美地围绕content + padding. 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解决方案，该解决方案通过 growing 全部起作用 flex行中的 flex项目，以填充行中的剩余空间:

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 flex项目上使用flex: 1 0 auto

• use flex: 1 0 auto on the li flex items

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

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屋！