【发布时间】：2018-06-28 11:34:48
【问题描述】：
我正在尝试仅使用 CSS 创建墙壁图案。这堵墙应该像现实生活中的墙一样从下向上生长。多亏了 flex，我才做到了这么多。我现在正试图以不均匀的模式排列 div 以使其更逼真。 Like this（我知道有 JavaScript 解决方案可以解决这个问题，但无论如何我可以只使用 CSS 来实现吗？
body {
display: flex;
min-height: 100%;
background: #f8f8f8;
}
html {
min-height: 100%;
}
.flex-container {
padding: 0;
width: 100%;
height: auto;
margin: 0;
list-style: none;
display: flex;
align-items: flex-start;
/*display: grid;
grid-gap:1rem;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));*/
}
.wrap-reverse {
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-item {
background: blue;
padding: 5px;
width: 100px;
height: 30px;
margin: 10px;
line-height: 30px;
color: white;
font-weight: bold;
font-size: 1em;
text-align: center;
}<ul class="flex-container wrap-reverse">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
<li class="flex-item">9</li>
<li class="flex-item">10</li>
<li class="flex-item">11</li>
<li class="flex-item">12</li>
<li class="flex-item">13</li>
<li class="flex-item">14</li>
<li class="flex-item">15</li>
<li class="flex-item">16</li>
<li class="flex-item">17</li>
<li class="flex-item">18</li>
<li class="flex-item">19</li>
<li class="flex-item">20</li>
<li class="flex-item">21</li>
<li class="flex-item">22</li>
<li class="flex-item">23</li>
<li class="flex-item">24</li>
<li class="flex-item">25</li>
<li class="flex-item">26</li>
<li class="flex-item">27</li>
<li class="flex-item">28</li>
<li class="flex-item">29</li>
<li class="flex-item">30</li>
<li class="flex-item">31</li>
<li class="flex-item">32</li>
<li class="flex-item">33</li>
<li class="flex-item">34</li>
<li class="flex-item">35</li>
<li class="flex-item">36</li>
<li class="flex-item">37</li>
<li class="flex-item">38</li>
<li class="flex-item">39</li>
<li class="flex-item">40</li>
<li class="flex-item">41</li>
<li class="flex-item">42</li>
<li class="flex-item">43</li>
<li class="flex-item">44</li>
<li class="flex-item">45</li>
<li class="flex-item">46</li>
<li class="flex-item">47</li>
<li class="flex-item">48</li>
<li class="flex-item">49</li>
<li class="flex-item">50</li>
<li class="flex-item">51</li>
<li class="flex-item">52</li>
<li class="flex-item">53</li>
<li class="flex-item">54</li>
<li class="flex-item">55</li>
<li class="flex-item">56</li>
<li class="flex-item">57</li>
<li class="flex-item">58</li>
<li class="flex-item">59</li>
<li class="flex-item">60</li>
<li class="flex-item">61</li>
<li class="flex-item">62</li>
<li class="flex-item">63</li>
<li class="flex-item">64</li>
<li class="flex-item">65</li>
<li class="flex-item">66</li>
<li class="flex-item">67</li>
<li class="flex-item">68</li>
<li class="flex-item">69</li>
<li class="flex-item">70</li>
<li class="flex-item">71</li>
<li class="flex-item">72</li>
<li class="flex-item">73</li>
<li class="flex-item">74</li>
<li class="flex-item">75</li>
<li class="flex-item">76</li>
<li class="flex-item">77</li>
<li class="flex-item">78</li>
<li class="flex-item">79</li>
<li class="flex-item">80</li>
<li class="flex-item">81</li>
<li class="flex-item">82</li>
<li class="flex-item">83</li>
<li class="flex-item">84</li>
<li class="flex-item">85</li>
<li class="flex-item">86</li>
<li class="flex-item">87</li>
<li class="flex-item">88</li>
<li class="flex-item">89</li>
<li class="flex-item">90</li>
<li class="flex-item">91</li>
<li class="flex-item">92</li>
<li class="flex-item">93</li>
<li class="flex-item">94</li>
<li class="flex-item">95</li>
<li class="flex-item">96</li>
<li class="flex-item">97</li>
<li class="flex-item">88</li>
<li class="flex-item">99</li>
<li class="flex-item">100</li>
</ul>【问题讨论】：
-
你是这样的吗？ jsfiddle.net/tmea7cjx
-
Brick layout in CSS的可能重复
-
@Roberrrt 这个答案包含每一行，在这个问题中他们都是兄弟姐妹。