zebra striping rows in a flex container with flex-wrap:wrap

Question

Let's say I'm using a flexbox container with flex-direction:row and flex-wrap:wrap.

Depending on the size of the browser window, I might have 2, 3, 4 or more items in each row.

I want to put a grey background in the items in every other row, mimicking a table layout. Is there an easy way to do this?

Example fiddle here: 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, this is actually a fairly difficult task with flexboxes. The best way I could come up with is to use javascript to find out where the wrapping is happening by looping through and comparing the heights of the items. Currently, it is in a self-executing function and will only run on window load. If you want it to be responsive when someone changes a browser size after load then put it inside of a function and call that function on window resize.

Otherwise here is everything.

(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";
                    }
                }
            }
        }

    })();