显示弹性顺序 CSS

Question

我有一个网格，将显示许多包含内容的 div。目前，它分为 2 行，将 div 的高度分开 50%。

这是正确的，但顺序如下：-

1,3,5, 7,9,11
2,4,6, 8,10,12

不过我希望它以以下方式显示：-

1,2,3, 7,8,9
4,5,6, 10,11,12

我想保持水平滚动，因此每行只显示 2 个 div。

理想情况下，如果可能的话，我不想添加任何额外的 div，我只需要更改顺序。我还希望它显示前 6 个帖子，即 1、2、3、4、5、6。我在这里制作了一个代码笔：- https://codepen.io/scottYg55/pen/bGdXEVw

.tiles {

  height: 1000px;

  overflow-x: scroll !important;

}

.tiles {

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  -ms-flex-direction: column;

  -webkit-flex-direction: column;

  flex-direction: column;

  flex-wrap: wrap;

  height: 100vh;

  overflow: auto;

  position: relative;

  /* transform: rotateX(180deg); */

}

.tiles .tile:nth-child(1n) {

  flex-basis: calc(50%);

  background: red !important;

}

.tiles .tile {

  flex-basis: calc(100% / 2);

  width: calc(100% / 3);

  position: relative;

  background-repeat: no-repeat;

  background-size: cover;

  display: flex;

  color: white;

  overflow: hidden;

  box-sizing: border-box;

  /* transform: rotateX(180deg); */

}

<div class="tiles">

  <div class="tile">1</div>

  <div class="tile">2</div>

  <div class="tile">3</div>

  <div class="tile">4</div>

  <div class="tile">5</div>

  <div class="tile">6</div>

  <div class="tile">7</div>

  <div class="tile">8</div>

  <div class="tile">9</div>

  <div class="tile">10</div>

  <div class="tile">11</div>

  <div class="tile">12</div>

</div>

有谁知道最好的方法来做到这一点？

Answer 1

您可以使用 CSS 网格轻松完成此操作：.tiles {&nbsp; display: grid;&nbsp; grid-auto-flow: column dense;&nbsp; grid-auto-columns:calc((100% - 20px)/3);&nbsp; grid-auto-rows: 80px;&nbsp; grid-gap:10px;&nbsp; overflow: auto;&nbsp; counter-reset:num 0;}.tiles .tile {&nbsp; background: red;&nbsp; font-size:50px;&nbsp; color:#fff;&nbsp; grid-row:1;}.tiles .tile:nth-child(6n + 4),.tiles .tile:nth-child(6n + 5),.tiles .tile:nth-child(6n + 6){&nbsp; grid-row:2;&nbsp; background:blue;}.tiles .tile:before {&nbsp; content:counter(num);&nbsp; counter-increment:num;}<div class="tiles">&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div>&nbsp; <div class="tile"></div></div>

Answer 2

您需要order为每个元素使用该属性。可能有更好的方法来设置号码order，但手动它看起来像这样：.tiles {&nbsp; height: 1000px;&nbsp; overflow-x: scroll !important;}.tiles {&nbsp; display: -ms-flexbox;&nbsp; display: -webkit-flex;&nbsp; display: flex;&nbsp; -ms-flex-direction: column;&nbsp; -webkit-flex-direction: column;&nbsp; flex-direction: column;&nbsp; flex-wrap: wrap;&nbsp; height: 100vh;&nbsp; overflow: auto;&nbsp; position: relative;&nbsp; /* transform: rotateX(180deg); */}.tiles .tile:nth-child(1n) {&nbsp; flex-basis: calc(50%);&nbsp; background: red !important;}.tiles .tile:nth-child(1) {&nbsp; order: 1;}.tiles .tile:nth-child(2) {&nbsp; order: 3;}.tiles .tile:nth-child(3) {&nbsp; order: 5;}.tiles .tile:nth-child(4) {&nbsp; order: 2;}.tiles .tile:nth-child(5) {&nbsp; order: 4;}.tiles .tile:nth-child(6) {&nbsp; order: 6;}.tiles .tile:nth-child(7) {&nbsp; order: 7;}.tiles .tile:nth-child(8) {&nbsp; order: 9;}.tiles .tile:nth-child(9) {&nbsp; order: 9;}.tiles .tile:nth-child(10) {&nbsp; order: 10;}.tiles .tile:nth-child(11) {&nbsp; order: 11;}.tiles .tile:nth-child(12) {&nbsp; order: 12;}.tiles .tile {&nbsp; flex-basis: calc(100% / 2);&nbsp; width: calc(100% / 3);&nbsp; position: relative;&nbsp; background-repeat: no-repeat;&nbsp; background-size: cover;&nbsp; display: flex;&nbsp; color: white;&nbsp; overflow: hidden;&nbsp; box-sizing: border-box;&nbsp; /* transform: rotateX(180deg); */}<div class="tiles">&nbsp; <div class="tile">1</div>&nbsp; <div class="tile">2</div>&nbsp; <div class="tile">3</div>&nbsp; <div class="tile">4</div>&nbsp; <div class="tile">5</div>&nbsp; <div class="tile">6</div>&nbsp; <div class="tile">7</div>&nbsp; <div class="tile">8</div>&nbsp; <div class="tile">9</div>&nbsp; <div class="tile">10</div>&nbsp; <div class="tile">11</div>&nbsp; <div class="tile">12</div></div>编辑：由于您使用的是 WordPress，因此您可以使用modulo运算符来计算帖子数并每六个帖子换行：https://www.php.net/manual/en/language.operators.arithmetic.php示例查询（因为我不知道你的是什么样子）：if ( have_posts ) :&nbsp; &nbsp; // This is how many posts your query found&nbsp; &nbsp; $post_count = $wp_query->found_posts;&nbsp; &nbsp; // Setup an iterator to count posts;&nbsp; &nbsp; $i = 0;&nbsp; &nbsp; // start the loop.&nbsp;&nbsp;&nbsp; &nbsp; while ( have_posts ) : the_post;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // This is where we check the posts to wrap.&nbsp; &nbsp; &nbsp; &nbsp; // Basically, if the iterator returns the remainder of 0 using 6 as the divider&nbsp; &nbsp; &nbsp; &nbsp; if ( $i%6 === 0 ) :&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<div class="post-wrapper">';&nbsp; &nbsp; &nbsp; &nbsp; endif;&nbsp; &nbsp; &nbsp; &nbsp; /* ALL OF YOUR POST OUTPUT CODE GOES HERE */&nbsp; &nbsp; &nbsp; &nbsp; // Check the iterator again to add the closing wrapping div tag.&nbsp; &nbsp; &nbsp; &nbsp; // If the remainder is 5, that means it will be the last item in the loop or&nbsp; &nbsp; &nbsp; &nbsp; // if the total count minus 1, that means we are at the end of all posts.&nbsp; &nbsp; &nbsp; &nbsp; if ( $i%6 === 5 || $i === ( $post_count - 1 ) ) :&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '</div><!-- /post-wrapper -->';&nbsp; &nbsp; &nbsp; &nbsp; endif;&nbsp; &nbsp; &nbsp; &nbsp; // increment the iterator up one every time we loop.&nbsp; &nbsp; &nbsp; &nbsp; $i++;&nbsp; &nbsp; endwhile;endif;我没有使用实际的 WP 循环进行测试，但在数组上进行了测试并得到了预期的输出。使用包装的内容，您可以更改 CSS 以保持水平滚动，但您可以使用帖子块作为 Flex 元素。