如何在响应式 flexbox 网格布局中用假项目填充最后一行？

Question

我们有典型的响应式 flexbox 网格，具有固定宽度的元素和动态的行数，基于屏幕分辨率和项目数。例如，假设我们有七个<div>s，它将显示如下内容：

我们需要用“假”项目或占位符来完成最后一行，而不需要额外的 HTML：

而且，如果我们改变分辨率，它应该重新计算所需的占位符：

这甚至可以用纯 CSS 实现吗？

我们正在使用 flexbox，但如果它可以解决我们的问题，我们也愿意使用 CSS 网格布局。

Answer 1

这可能是一种方法。

诀窍是使用伪元素（充当占位符）复制下一行相同位置的每个项目。并使用overflow: hidden 隐藏位于弹性容器之外的最后一行伪元素。这是一张显示3px 位移和溢出的图片，以帮助理解这个想法。

但是，当然，根据您的具体要求，它可能有很多缺陷。

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
}

li {
  position: relative;
  box-sizing: border-box;
  background: #299CFF;
  width: 3em;
  height: 3em;
  margin: 0.25em;
  text-align: center;
  line-height: 3;
  color: white;
}

li::before {
  position: absolute;
  top: calc(3em + 2 * 0.25em);
  content: "X";
  display: block;
  width: 3em;
  height: 3em;
  background: red;
}

<ul class="flex">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
  <li>32</li>
  <li>33</li>
  <li>34</li>
  <li>35</li>
  <li>36</li>
  <li>37</li>
  <li>38</li>
  <li>39</li>
  <li>40</li>
  <li>41</li>
  <li>42</li>
  <li>43</li>
  <li>44</li>
  <li>45</li>
  <li>46</li>
  <li>47</li>
  <li>48</li>
  <li>49</li>
</ul>