是否可以创建具有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
元素的方式完美包裹内容+填充。 max-content
和 min-content
似乎也不适用于模板列或自动行。
非常感谢任何意见。非常感谢!
最佳答案
Flexbox 更适合这种情况 - 您可以使用一个hacky Flexbox 解决方案,该解决方案通过在中种植所有flex 元素来工作。 >伸缩线填充行中的剩余空间:
在
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>
关于css - 无序列表的作用类似于网格自动流动密集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55556049/