(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、：any /:after、flexbox等等。

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

没问题的。若要更改元素显示窗体，请执行以下操作。

Answer 1

如果没有@media，您就无法做到这一点，但是.fpm中元素的大小是固定的，这允许您计算@media查询何时应该中断2row、4r、8r，还有我刚才做过的2行的例子，与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/

我希望我做得对。

Answer 2

如果没有媒体查询或脚本，就无法做到这一点，下面是一个使用媒体查询的简单示例。

小提琴演示

堆栈段

#fpma {
  width: 100%;
}
.fpm {
  width: 48px;
  height: 33px;
  float: right;
  margin: 4px;
  background:url('http://placehold.it/100') center center no-repeat;
}

@media screen and (max-width: 450px) {
  .fpm:nth-of-type(5) {
    clear: right;
  }
}
@media screen and (max-width: 225px) {
  .fpm:nth-of-type(3),
  .fpm:nth-of-type(7) {
    clear: right;
  }
}
@media screen and (max-width: 112px) {
  .fpm {
    clear: right;
  }
}

<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>

​

Answer 3

我对这4例中的3例有了解决办法。

如果我将容器设置为柔性箱，并调整边距，则得到以下内容

​

#container {
  width: 581px;
  height: 450px;
  border: solid 1px red;
  display: flex;
  flex-wrap: wrap;
  animation: widen 6s infinite;
}

.box {
  width: 48px;
  height: 50px;
  border: solid 1px blue;
  flex-shrink: 0;
}

.sep1 {
  margin-right: 150px;
}

.sep1 + div {
  margin-left: -150px;
}

.sep2 {
  margin-right: 50px;
}

.sep2 + div {
  margin-left: -50px;
}

@keyframes widen {
  from {width: 110px;}
  to {width: 450px;}
}

<div id="container">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box sep2">C</div>
    <div class="box">D</div>
    <div class="box sep1">A</div>
    <div class="box">B</div>
    <div class="box sep2">C</div>
    <div class="box">D</div>
</div>

​

但是一个元素行的要求打破了..。

也许有人能解决最后一个问题？