Flexbox:根据行数交替“行”和“行反向”

Posted

技术标签:

【中文标题】Flexbox:根据行数交替“行”和“行反向”【英文标题】:Flexbox: Alternate "row" and "row-reverse" according to row's number 【发布时间】:2018-04-15 22:51:40 【问题描述】:

我正在尝试使用 Flexbox 创建一个响应式布局,它允许我交替方向 rowrow-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>

【问题讨论】:

【参考方案1】:

鉴于项目具有已知宽度,这可以使用order 和媒体查询来完成,而不是使用row/reverse-row,除非每一行都有一个包装器,这在您的案例。

堆栈sn-p

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

堆栈sn-p

(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】:

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

.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>

【讨论】:

一团糟!但是你给了我一个在 Javascript 中泛化的好主意 是的,无论是 js 还是 sass 都会把它整理好

以上是关于Flexbox:根据行数交替“行”和“行反向”的主要内容,如果未能解决你的问题,请参考以下文章

React Native中的Flexbox可变高度子项

Flexbox 行:不根据内容增长? [复制]

如何获取 javascript 中用于 flexbox 和网格布局的行数和列数?

Zebra 使用包装项目对 flexbox 表进行条带化

vbscript 根据特定列中的数据为Excel行设置交替背景(在此示例中:cloumn 2(B))

如何计算一行中flexbox项目的数量?