zebra striping reihen in einem flex container mit flex-wrap: wrap

Question

Angenommen, ich verwende einen Flexbox-Container mit flex-direction:row und flex-wrap:wrap.

Je nach der Größe des Browserfensters kann ich 2, 3, 4 oder mehr Elemente in jeder Zeile haben.

Ich möchte einen grauen Hintergrund in die Elemente in jeder anderen Zeile setzen, ein Tabellenlayout nachahmen. Gibt es einen einfachen Weg, dies zu tun?

Beispiel Geige hier: https://jsfiddle.net/mqf7nouc/1/

HTML:

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

CSS:

.container { 
    display:flex; 
    flex-direction:row; 
    flex-wrap:wrap; 
} 

.item { 
    height:50px; 
    width:100px; 
    text-align:center; 
    vertical-align:middle; 
    line-height:50px; 
    border:1px solid black; 
    margin:5px; 
} 

Answer 1

Okay, das ist eigentlich eine ziemlich schwierige Aufgabe mit flexboxes. Der beste Weg, auf den ich kommen könnte, ist Javascript zu verwenden, um herauszufinden, wo das Wrapping passiert, indem man die Höhen der Elemente durchläuft und vergleicht. Derzeit befindet es sich in einer selbstausführenden Funktion und wird nur bei Laden des Fensters ausgeführt. Wenn Sie möchten, dass es reagiert, wenn jemand nach dem Laden eine Browsergröße ändert, dann fügen Sie ihn in eine Funktion ein und rufen diese Funktion bei der Fenstergrößenänderung auf.

Ansonsten ist hier alles.

(function() { 
    var x = 0; 
    var counter = 0; 
    var boxesPerRow = 0; 
    var elements = document.getElementsByClassName("item"); 
    var totalBoxes = elements.length; 
     // Loop to find out how many boxes per row 
     for (var i = 0; i < totalBoxes-2; i++){ 
      x = i+1; 
      var temp = elements[i].getBoundingClientRect(); 
      if (x <= elements.length) 
      { 
       var next = elements[x].getBoundingClientRect(); 
        // Compare height of current vs the next box 
        if (next.top > temp.top && counter ==0) 
        { 

         boxesPerRow = x; 
         counter = 1; 
        } 
      } 
     } 


     // var marker is where we are applying style 
     // var countUpTo is the last box in the row we are styling 
     const boxes = boxesPerRow; 
     var countUpTo = boxesPerRow; 
     var counter = 0; 

     // Loop through and apply color to boxes. 
     for(var marker = 0; marker < totalBoxes; marker++) 
     { 
      if(marker < countUpTo) 
      { 
       elements[marker].style.backgroundColor = "red"; 

      } 
      else 
      { 
       counter++; 
       if(counter === 1) 
       { 
        countUpTo = boxes*(counter+2); 
       } 
       else{ 
        countUpTo = countUpTo + (boxes*2); 
       } 

       marker = marker+boxes-1; 

       // Handles buttom row not being a full set of boxes. 
       if(marker> totalBoxes && !(marker > totalBoxes-(boxes*2))) 
       { 

        var leftOver = marker-totalBoxes; 

        for(var c = 1; c <= leftOver; c++) 
        { 

         elements[(totalBoxes-c)].style.backgroundColor = "red"; 
        } 
       } 
      } 
     } 

    })();