代码之家  ›  专栏  ›  技术社区  ›  Christian Vincenzo Traina

Flexbox:根据行的编号交替“行”和“行反转”

  •  5
  • Christian Vincenzo Traina  · 技术社区  · 7 年前

    我正在尝试使用Flexbox创建一个响应性布局,它允许我交替两个方向 row row-reverse .

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

    enter image description here

    enter image description here

    或者仍然:

    enter image description here

    我如何使用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>
    2 回复  |  直到 7 年前
        1
  •  4
  •   Asons Oliver Joseph Ash    7 年前

    考虑到项目的宽度已知,可以使用 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版本。

    注意,分配 顺序

    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>
        2
  •  4
  •   Pete Irfan TahirKheli    7 年前

    我看到这种情况的唯一方法是手动设置顺序,然后对断点使用媒体查询-下面是一个示例

    .flexbox-container {
      display: flex;
      flex-wrap: wrap;
    }
    
    .flex-item {
      width: calc(50% - 10px);
      height: 100px;
      background: red;
      margin: 5px;
      font-family: sans-serif;
      color: white;
      text-align: center;
      font-size: 2em;
      line-height: 150%;
    }
    
    .flex-item:nth-child(1) {
      order: 1;
    }
    
    .flex-item:nth-child(2) {
      order: 2;
    }
    
    .flex-item:nth-child(3) {
      order: 4;
    }
    
    .flex-item:nth-child(4) {
      order: 3;
    }
    
    .flex-item:nth-child(5) {
      order: 5;
    }
    
    .flex-item:nth-child(6) {
      order: 6;
    }
    
    .flex-item:nth-child(7) {
      order: 8;
    }
    
    .flex-item:nth-child(8) {
      order: 7;
    }
    
    @media only screen and (max-width: 768px) {
      .flex-item {
        width: calc(33.33333% - 10px);
      }
      .flex-item:nth-child(1) {
        order: 1;
      }
      .flex-item:nth-child(2) {
        order: 2;
      }
      .flex-item:nth-child(3) {
        order: 3;
      }
      .flex-item:nth-child(4) {
        order: 6;
      }
      .flex-item:nth-child(5) {
        order: 5;
      }
      .flex-item:nth-child(6) {
        order: 4;
      }
      .flex-item:nth-child(7) {
        order: 7;
      }
      .flex-item:nth-child(8) {
        order: 8;
      }
    <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>