如何在响应式弹性框网格布局中填写假项目的最后一行？

Question

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

我们需要使用＆＃34; fake＆＃34;完成最后一行。项目或占位符，没有额外的HTML：

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

这只是简单的CSS吗？

我们正在使用flexbox，但如果它解决了我们的问题，我们将继续使用CSS网格布局。

Answer 1

这可能是一种方法。

诀窍是使用伪元素（充当占位符）来复制下面一行中相同位置的每个项目。并使用overflow: hidden隐藏落在Flex容器之外的最后一行伪元素。这是一张显示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>