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

问题描述 投票:2回答:1

是否可以创建具有grid-auto-flow: dense属性的不同大小的项目的无序列表?我目前有一个无序的术语列表,从左到右填充我的页面,任何不适合的术语都被推到下一行。但是,这会在页面右侧留下空白,而不是响应式设计(列表从左侧开始)。我看了一下flexbox的flex-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-columnsgrid-auto-rows,但我似乎无法复制li元素如何在内容+填充周围完美包裹。 max-contentmin-content似乎也不适用于模板列或自动行。

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

css css3 flexbox html-lists css-grid
1个回答
2
投票

Flexbox更适合这种情况 - 您可以使用hacky flexbox解决方案,该解决方案通过生成弹性线中的所有弹性项目来填充行中的剩余空间:

  • flex: 1 0 auto flex项目上使用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>
© www.soinside.com 2019 - 2024. All rights reserved.