图标，它们在网格中均匀分布

Posted 2023-03-05

【中文标题】图标，它们在网格中均匀分布

【英文标题】：icons, which are equally distributed across the grid

【发布时间】：2015-10-24 01:27:47

【问题描述】：

是否可以仅使用 CSS 来平均分配图标？

我想得到这个结果（我没有发布图片的声誉）

http://i.stack.imgur.com/bC0Aw.jpg

我找到了一个使用 javascript 的解决方案：

_http://jsfiddle.net/VLr45/59

我尝试了 flexbox，但得到了这个

http://jsfiddle.net/egns7cj1/
http://jsfiddle.net/egns7cj1/2/

http://i.stack.imgur.com/h8tU2.jpg

【问题讨论】：

请贴出你目前尝试过的代码。

欢迎来到 Stack Overflow！寻求调试帮助的问题（“为什么这段代码不工作？”）必须包括所需的行为、特定的问题或错误以及重现它所需的最短代码在问题本身中。 注意 - 请不要滥用代码块来绕过这个要求。

@RüdigerHerrmann 我添加了指向 jsfiddle 的链接

喜欢这个？ jsfiddle.net/egns7cj1/3

@ManojKumar 物品应该从左到右放置i.stack.imgur.com/M6alC.jpg

【参考方案1】：

将项目包装在另一个具有flex-basis: 33% 的父项中。使用媒体查询根据屏幕大小更改值。

.flex-container 
  flex-flow: row wrap;
  display: flex;
  width: 100%;
  height: 320px;
  border: 1px #eee solid;
  background: #ffd54f;

.inner-container 
  display: flex;
  flex: 0 0 33%;
  justify-content: center;

.item 
  flex: 0 1 auto;
  width: 100px;
  height: 100px;
  background: #fff;
  border: 1px #777 solid;

@media (min-width: 991px) 
  .inner-container 
    flex: 0 0 25%;
  

@media (min-width: 1200px) 
  .inner-container 
    flex: 0 0 20%;
  

<div class="flex-container">
  <div class="inner-container">
    <div class="item"></div>
  </div>
  <div class="inner-container">
    <div class="item"></div>
  </div>
  <div class="inner-container">
    <div class="item"></div>
  </div>
  <div class="inner-container">
    <div class="item"></div>
  </div>
  <div class="inner-container">
    <div class="item"></div>
  </div>
  <div class="inner-container">
    <div class="item"></div>
  </div>
  <div class="inner-container">
    <div class="item"></div>
  </div>
  <div class="inner-container">
    <div class="item"></div>
  </div>

</div>

【讨论】：

使用这种方法我们有一个固定的列数：列 33% - 3 列，25% - 4 列等。有没有办法让列数浮动，取决于宽度

就像使用justify-content: space-between时一样