CSS flex box alternate row colors

Question

When using tables, it is easy to alternate colors in table rows using the nth child selectors (https://stackoverflow.com/a/3084318/1385857). Is there a comparable way to do so when using the flexbox layout. I have the following (from https://philipwalton.github.io/solved-by-flexbox/demos/grids/):

<div class="Grid">
  <div class="Grid-cell"></div>
  [more divs]
  <div class="Grid-cell"></div>
</div>

.Grid
{
  display: flex;
  flex-wrap: wrap;
}

.Grid-cell
{
  flex: 1;
}

Is it possible to alternate row colors in this scenario. To clarify, there are no real rows, only the virtual rows created by flex box due to wrapping.

No...there is no CSS what can detect wrapping. you need Javascript....or media queries — Paulie_D, Jul 11 '16 at 11:46
For alternate rows also you can use the same like `.Grid:nth-child(even)` and `.Grid:nth-child(odd) ` — Mani, Jul 11 '16 at 12:11
possible duplicate: [Zebra striping a flexbox table with wrapping items](http://stackoverflow.com/q/35355253/3597276) — Michael Benjamin, Jul 11 '16 at 13:29
I might comment that you should only use classes if the elements cannot be predicted. In your case, _all_ of the inner `div` elements are the same, so you should dispense with the `class` attribute and use the following CSS selector: `.Grid>div`. Over-classing makes your code harder to read and harder to maintain. — Manngo, Apr 07 '18 at 00:42
For layouts, _everything_ is easier with tables. It's semantically wrong? Yes, but it just works. — rodrigocfd, Oct 01 '19 at 13:47

score 3 · Answer 1 · answered Sep 17 '19 at 09:28

A bit late but it might help others. Here is a working solution I've just come up with. It uses the linear-gradient CSS function.

The only downside is that it requires your cells to have a fixed height.

/* $cell_height: 80px */

.grid {
  display: flex;
  flex-flow: row wrap;

  /* this is where the magic is */
  background-image: linear-gradient(180deg, red 50%, green 50%);
  background-repeat: repeat;
  background-size: 100px 160px; /* width is not relevant, but height must be 2*$cell_height */
}

.grid-cell {
  height: 80px; /* $cell_height */
  
  /* this is just to have a responsive display for the demo */
  width: 25%;
  min-width: 250px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="grid">
  <div class="grid-cell">1</div>
  <div class="grid-cell">2</div>
  <div class="grid-cell">3</div>
  <div class="grid-cell">4</div>
  <div class="grid-cell">5</div>
  <div class="grid-cell">6</div>
  <div class="grid-cell">7</div>
  <div class="grid-cell">8</div>
  <div class="grid-cell">9</div>
  <div class="grid-cell">10</div>
  <div class="grid-cell">11</div>
  <div class="grid-cell">12</div>
  <div class="grid-cell">13</div>
  <div class="grid-cell">14</div>
</div>

Dry-macarony · Answer 2 · 2016-07-11T13:50:40.357

-2

You can use the same technic with nth-child (2n+1, even, odd), or whatever you want.

The display of the element doesn't interfere with that here.

.Grid {
  display: flex;
  flex-wrap: wrap;
}
.Grid-row {
  flex: 1;
}
.Grid-cell:nth-child(2n+1) {
  background: pink;
}

<div class="Grid">
  <div class="Grid-row">
    <div class="Grid-cell">Grid-cell 1</div>
    <div class="Grid-cell">Grid-cell 2</div>
    <div class="Grid-cell">Grid-cell 3</div>
    <div class="Grid-cell">Grid-cell 4</div>
    <div class="Grid-cell">Grid-cell 5</div>
    <div class="Grid-cell">Grid-cell 6</div>
    <div class="Grid-cell">Grid-cell 7</div>
  </div>
  <div class="Grid-row">
    <div class="Grid-cell">Grid-cell 1</div>
    <div class="Grid-cell">Grid-cell 2</div>
    <div class="Grid-cell">Grid-cell 3</div>
    <div class="Grid-cell">Grid-cell 4</div>
    <div class="Grid-cell">Grid-cell 5</div>
    <div class="Grid-cell">Grid-cell 6</div>
    <div class="Grid-cell">Grid-cell 7</div>
  </div>
</div>

edited Jul 11 '16 at 13:50

answered Jul 11 '16 at 12:20

Dry-macarony

69
6

1

You aren't alternating **rows**, just divs – Paulie_D Jul 11 '16 at 12:34
Yes, but if I have well understand the question, @Manish want to create a table, using div and flex box. I edit my first answer example, to give and example visually alterning "row". But maybe I missed something here. – Dry-macarony Jul 11 '16 at 13:52
No, he doesn't want to use **actual** rows...that's the point. He wants the *virtual* rows created by the the wrapping to be different colors...and you can't do that with a CSS selector. – Paulie_D Jul 11 '16 at 13:54
How. Ok, I see now. Sorry for the misconfusion. – Dry-macarony Jul 11 '16 at 13:56
Added a clarification to the question. The goal is to get zebra striping without real rows. – Manish Jul 12 '16 at 03:31

CSS flex box alternate row colors

2 Answers2