html - (8-1) - (4-2) - (2-4) - (1-8) 响应式元素网格 - 如何用纯 CSS 解决这个问题？

Question

在响应式网站上，我有以下 HTML:

            <div id="fpma">
                <span class="fpm"></span>
                <span class="fpm"></span>
                <span class="fpm"></span>
                <span class="fpm"></span>
                <span class="fpm"></span>
                <span class="fpm"></span>
                <span class="fpm"></span>
                <span class="fpm"></span>
            </div>

容器 #fpma 的宽度根据屏幕尺寸而变化。 .fpm 内的元素具有固定宽度。目前的CSS如下:

#fpma {
    text-align: right;
    width: 100%;
}

.fpm {
    width: 48px;
    height: 33px;
    display: inline-block;
    margin: 4px;
    background:url('images/bar.png') center center no-repeat;
}

随着父容器宽度的减小，我想按如下方式打破元素:

1 行 - 8 个元素

2 行 - 4 个元素

4 行 - 2 个元素

8 行 - 1 个元素

寻找可重用的解决方案，不需要通过添加额外的包装器来更改 HTML。

欢迎使用任何 CSS 3 功能，例如 nth-child、:before/:after、flexbox 等。

寻找一种不依赖于媒体查询的解决方案(因为它们需要固定的最大宽度/最小宽度)。 如果你能给出一个没有媒体查询就不可能实现的原因并给出一个媒体查询解决方案，这也可以。我尝试了各种方法，但还没有结果。

没关系。如果需要，可以更改元素的显示形式。

Answer 1

如果没有@media，你就无法做到这一点，但是你在.fpm内有固定大小的元素，这允许你在@media查询应该中断2行、4r、8r时对它进行计数，有2行I的示例刚刚做了，用同样的逻辑你可以做 4,8。

#fpma {
    text-align: right;
    width: 100%;
    box-sizing:border-box;
    border:1px solid red;
}

.fpm {
    width: 48px;
    height: 33px;
    display: inline-block;
    box-sizing:border-box;
    border:1px solid #000;
    margin: 4px;
    background:url('images/bar.png') center center no-repeat;
}
@media screen and (max-width:408px){
  #fpma:before, #fpma:after {
    content: "";
    display: table;
}
  #fpma:after {
    clear: both;
  } 
  #fpma {
    *zoom: 1;
   }
  .fpm {
    float: right;
    }
  

  .fpm:nth-of-type(5n)
  {
    display: inline;
    clear: right;
    float: right;
  }
}

<div id="fpma">
                <span class="fpm">1</span>
                <span class="fpm">2</span>
                <span class="fpm">3</span>
                <span class="fpm">4</span>
                <span class="fpm">5</span>
                <span class="fpm">6</span>
                <span class="fpm">7</span>
                <span class="fpm">8</span>
            </div>

https://jsfiddle.net/vm0opbab/

我希望我做对了。