Html （8-1）-（4-2）-（2-4）-（1-8）响应元素网格-如何使用纯CSS解决此问题？

在响应式网站上，我有以下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 {
    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

欢迎使用任何css3功能，如nth-child、：before/：after、flexbox等

---

正在寻找不依赖于媒体查询的解决方案（因为它们需要固定的最大宽度/最小宽度）如果您能给出没有媒体查询就无法执行的原因，并给出媒体查询解决方案，也可以。我尝试了各种方法，但还没有结果

---

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

如果没有@media，您无法执行此操作，但您的内部元素的大小是固定的。fpm，这允许您在@media查询中断2row、4r、8r时对其进行计数，例如我刚才做的两行，使用相同的逻辑，您可以为4,8执行此操作

#fpma{
文本对齐：右对齐；
宽度：100%；
框大小：边框框；
边框：1px纯红；
}
.fpm{
宽度：48px；
高度：33像素；
显示：内联块；
框大小：边框框；
边框：1px实心#000；
保证金：4倍；
背景：url（'images/bar.png'）中心不重复；
}
@媒体屏幕和屏幕（最大宽度：408px）{
#fpma:之前#fpma:之后{
内容：“；
显示：表格；
}
#fpma：之后{
明确：两者皆有；
} 
#fpma{
*缩放：1；
}
.fpm{
浮动：对；
}
.fpm:n个类型（5n）
{
显示：内联；
清楚:对,；
浮动：对；
}
}

1.
2.
3.
4.
5.
6.
7.
8.

如果没有媒体查询或脚本，您无法执行此操作，下面是一个使用媒体查询的简单示例

堆栈片段

#fpma{
宽度：100%；
}
.fpm{
宽度：48px；
高度：33像素；
浮动：对；
保证金：4倍；
背景：url（'http://placehold.it/100中-中不重复；
}
@媒体屏幕和屏幕（最大宽度：450px）{
.fpm：第n种类型（5）{
清楚:对,；
}
}
@媒体屏幕和屏幕（最大宽度：225px）{
.fpm：第n种类型（3），
.fpm：第n种类型（7）{
清楚:对,；
}
}
@媒体屏幕和屏幕（最大宽度：112px）{
.fpm{
清楚:对,；
}
}

---

我有4种情况中3种的解决方案

如果我将容器设置为flexbox，并调整边距，我会得到这个结果

#容器{
宽度：581px；
高度：450px；
边框：实心1px红色；
显示器：flex；
柔性包装：包装；
动画：加宽6s无限；
}
.盒子{
宽度：48px；
高度：50px；
边框：纯色1px蓝色；
弹性收缩：0；
}
.sep1{
右边距：150px；
}
.sep1+部门{
左边距：-150px；
}
.9月2日{
右边距：50px；
}
.sep2+部门{
左边距：-50px；
}
@关键帧变宽{
从{宽度：110px；}
到{宽度：450px；}
}

A.
B
C
D
A.
B
C
D

“因为它们需要固定的最大宽度/最小宽度”，我不知道为什么这是一个特殊问题？是否因为您希望媒体查询依赖于元素的宽度，而元素的宽度可能会随着父容器宽度的减小而改变。。。那么媒体查询呢？基于视口宽度的重新设置样式不像魔术一样有效。您可能可以使用flexbox，但不能使用当前参数。你必须依靠包装，包装不在乎你有多少元素，也不在乎你是否喜欢偶数。祝你好运，不用媒体查询；）@Blackam，我建议您使用预处理器，因为这样您可以更改单个变量，并相应地更新各种不同的CSS值。@Blackam，“有那么难吗”是的，CSS作为一种语言并不是为了做这些事情而设计的，所有基于布局的增强功能（如flexbox）都试图解决这个问题，同时不破坏已经存在的每个网页，其中一些已经被破坏。也就是说，这里有一个使用预处理器的快速示例：Thx。在firefox中，它不起作用，但我认为这至少是一种有效的媒体查询方法。如果没有解决方案，我会接受。它在我的Firefox中工作，Firefox在此代码中不支持什么？nvm方法很好。我只是想知道，如果没有媒体的质疑，是否真的没有解决方案。