9N

9N

关注
发信
关注(28)粉丝(399)

html - CSS墙从下往上

我试着用css创建一个墙模式。这堵墙应该像现实生活中的墙一样从下往上生长。多亏了flex，我才做到了这一点。我现在正试图安排一个不平衡的模式，使之更现实。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>

最佳答案

我为你做了一个逻辑。
假设第一行有4个项，则意味着第二行有5个项。所以两行的项目总数是4+5=9
所以你必须瞄准这些项目：第n个孩子（9N）和第n个孩子（9N+5）
注：（9n）也可以写成（9n+0）或（9n+9）。
只需将这些项目的宽度更改为其他项目的一半。
堆栈段

body {
  display: flex;
  min-height: 100%;
  background: #ffffff;
}

html {
  min-height: 100%;
}

.flex-container {
  padding: 0;
  width: 100%;
  height: auto;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.flex-item {
  background: blue;
  padding: 5px;
  width: 25%;
  height: 50px;
  border: 5px solid #fff;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  box-sizing: border-box;
}

.flex-item:nth-child(9n),
.flex-item:nth-child(9n+5) {
  width: 12.5%;
}

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

为了进一步优化，您真的不需要给每个项目一个class。
如果li中只有数字，则使用CSS counter。
body {
  display: flex;
  min-height: 100%;
  background: #ffffff;
}

html {
  min-height: 100%;
}

.flex-container {
  padding: 0;
  width: 100%;
  height: auto;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.flex-container li {
  background: blue;
  padding: 5px;
  width: 25%;
  height: 50px;
  border: 5px solid #fff;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  box-sizing: border-box;
}

.flex-container li:nth-child(9n),
.flex-container li:nth-child(9n+5) {
  width: 12.5%;
}

.flex-container {
  counter-reset: my-counter;
}

.flex-container li:before {
  counter-increment: my-counter;
  content: counter(my-counter);
} 

<ul class="flex-container wrap-reverse">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

09-30 10:12
Powered by LMLPHP ©2024 9N 0.028766