javascript - Flexbox:根据行号交替使用 "row"和 "row-reverse"

Question

我正在尝试使用 Flexbox 创建一个响应式布局，它允许我交替方向 row 和 row-reverse。

也许你可以通过一些图像更好地理解它(注意方框的顺序):

并调整大小:

还是:

你可以想象一个箭头穿过每个盒子，它必须可以按照数字序列穿过 1 到 8(像蛇一样)。

如何使用 flexbox 实现它？

我想我可以使用 order CSS 属性，但我错过了一种动态设置它的方法。我不认为我可以用 JavaScript 实现这个结果，因为没有办法获取动态行的编号(除了丑陋的黑客，我想避免它们)。那么，你有什么想法吗？

谢谢。

如果你想根据我的代码写一个例子，你可以使用这个:

.flexbox-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  width: 380px;
  height: 100px;
  background: red;
  margin: 5px;
  
  font-family: sans-serif;
  color: white;
  text-align: center;
  font-size: 2em;
  line-height: 150%;
}

<div class="flexbox-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>

Answer 1

鉴于元素具有已知宽度，这可以使用 order 和媒体查询来完成，而不是使用 row/reverse-row，除非每一行都有一个包装器，这在您的情况下是不可能的。

堆栈片段

body {margin: 0}

.flexbox-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  width: 380px;
  height: 100px;
  background: red;
  margin: 5px;
  font-family: sans-serif;
  color: white;
  text-align: center;
  font-size: 2em;
  line-height: 150%;
}
@media (min-width: 796px) {
  .flex-item:nth-child(3)   { order: 2; }
  .flex-item:nth-child(4)   { order: 1; }
  .flex-item:nth-child(n+5) { order: 2; }  
  .flex-item:nth-child(7)   { order: 4; }
  .flex-item:nth-child(8)   { order: 3; }
}
@media (min-width: 1176px) {
  .flex-item:nth-child(3)   { order: 0; }
  .flex-item:nth-child(4)   { order: 3; }
  .flex-item:nth-child(5)   { order: 2; }
  .flex-item:nth-child(6)   { order: 1; }
  .flex-item:nth-child(n+7) { order: 3; }
  .flex-item:nth-child(8)   { order: 3; }
}
@media (min-width: 1556px) {
  .flex-item:nth-child(3)   { order: 0; }
  .flex-item:nth-child(4)   { order: 0; }
  .flex-item:nth-child(5)   { order: 4; }
  .flex-item:nth-child(6)   { order: 3; }
  .flex-item:nth-child(7)   { order: 2; }
  .flex-item:nth-child(8)   { order: 1; }
}

<div class="flexbox-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>

---

如果不知道元素的大小，这里有一个 jQuery 版本。

请注意，分配 order 值需要一次完成，否则它不会起作用，就好像一次开始更改一个元素的值一样，那个改变将立即执行并影响下一个元素的位置。

Codepen demo

堆栈片段

(function ($) {
  //  preload object array to gain performance
  var $items = $('.flexbox-container .flex-item');
    
  //  run at resize
  $( window ).resize(function() {
    $.fn.setOrder(false,0);   
  });

  $.fn.setOrder = function(reverse,idx) {

    var $order = [];
    
    $items.each(function(i, obj) {    

      //  did top value changed
      if (i != 0 && $items.eq(i - 1).offset().top != $(obj).offset().top) {
        reverse = !reverse;
        //  insert index when reverse
        idx = i;
      }
      if (reverse) {
        $order.splice(idx, 0, i);
      } else {
        $order.push(i);
      }
    });
    
    //  set item's order
    $items.css('order', function(i, val) {
        return $order[i];
    });    
  }
  
  //  run at load
  $.fn.setOrder(false,0);

}(jQuery));

.flexbox-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  width: 200px;
  height: 100px;
  background: red;
  margin: 5px;
  font-family: sans-serif;
  color: white;
  text-align: center;
  font-size: 2em;
  line-height: 150%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexbox-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>