Question

我正在尝试仅使用Flexbox创建响应式网格。网格是不规则的，大多数字段占据了屏幕的25％，而第3和第9个项目则占据了50％。因此，在重新启动模式之前，一个完整的网格包含14个项目。

到目前为止，我的代码如下：

<ul class="grid-container">
  <li class="grid-item">1</li>
  <li class="grid-item">2</li>
  <li class="grid-item">3</li>
  <li class="grid-item">4</li>
  <li class="grid-item">5</li>
  <li class="grid-item">6</li>
  <li class="grid-item">7</li>
  <li class="grid-item">8</li>
  <li class="grid-item">9</li>
  <li class="grid-item">10</li>
  <li class="grid-item">11</li>
  <li class="grid-item">12</li>
  <li class="grid-item">13</li>
  <li class="grid-item">14</li>
  <li class="grid-item">15</li>
  <li class="grid-item">16</li>
  <li class="grid-item">17</li>
  <li class="grid-item">18</li>
  <li class="grid-item">19</li>
  <li class="grid-item">20</li>
  <li class="grid-item">21</li>
  <li class="grid-item">22</li>
  <li class="grid-item">23</li>
  <li class="grid-item">24</li>
  <li class="grid-item">25</li>
  <li class="grid-item">26</li>
  <li class="grid-item">27</li>
  <li class="grid-item">28</li>
</ul>

SASS：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

li {
  flex-grow: 1;
  height: 14.0625vw;
  min-width: 25%;
  box-sizing: border-box;
  background: teal;
  color: white;
  text-align: center;
  padding: 0.5rem;
  border: 0.5rem solid white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  &:nth-of-type(3), &:nth-of-type(9) {
    min-width: 50%;
  }
  @media screen and (max-width: 1024px) {
    height: 28.125vw;
    min-width: 50%;
    &:nth-of-type(3n) {
      min-width: 100%;
    }
  }
  @media screen and (max-width: 768px) {
    height: 56.25vw;
    min-width: 100%;
  }
}

查看实际情况：https://codepen.io/jakeherp/pen/OGvjJe

如何使这种模式重复出现？

Answer 1

正如@Pete所说的，重复子模式一样，您可以使用Functional notation：

<An+B>
表示其数字位置在一系列兄弟姐妹与模式An + B匹配，每个正整数或零 n的值第一个元素的索引为1，公式中的n 开始从0开始计数。值A和B必须都为 s。

它可以与:nth-of-type()和:nth-child()一起使用。

因此，您不应该尝试&:nth-of-type(3), &:nth-of-type(9)：

&:nth-of-type(14n+3), &:nth-of-type(14n+9) {
  min-width: 50%;
}

具有重复不规则图案的纯Flexbox网格

1 个答案: