响应式网格中的固定宽度项目？

user1952811 发表于 Dev

用户名

我有固定宽度的元素，我想以此为网格。唯一的问题是我希望它能够响应。基本上，一行中有尽可能多的项目，然后随着空间变小，将其移至第二行。

我正在使用jeet.gs之类的框架，它提供了一个非常有用的功能，称为“循环”，您可以使用该功能指定一行中所需的项目数量，它会自动为您创建一个网格。唯一的问题是要使其具有响应性，这意味着要连续从4项变为3项，我需要进行如下计算（itemWidth * 4），然后执行uncycle: 4and cycle: 3。

哪种类型的解决方案可以解决此类问题？

修士勒

我认为jeet-grid并没有更通用的解决方案。使用cycle和uncycle当然是实现此目的的一种预期方式，尽管您可能想考虑使用媒体查询而不是计算项目宽度（请使用手写笔观看此视频）。

另一种可能性是，仅使用flexbox（请参阅本指南），只需要注意有限的浏览器支持即可。

因此，例如：

#wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.item {
    width: 150px;
    height: 150px;
    background-color: green;
    margin: 10px;
}

<div id="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

也有基于flexbox的网格系统...例如flexboxgrid.com。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。