CSS Flex Box --- flex-wrap:wrap; How to style a specific line?

Question

My question relates to styling Flex-Boxes that wrap (flex-wrap:wrap;) into multiple lines depending on the width of the Browser window: Is there any way, other than JavaScript, to design a specific line?

We have the following divs

 <body>
 <div class="flexwrap">
     <div class=flexbox"></div>
     <div class=flexbox"></div>
     <div class=flexbox"></div>
 </div>
 </body>

And the following stylesheet

.flexwrap {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    display: -moz-box;
    -moz-box-orient: horizontal;
    display: flex;
    box-orient: horizontal;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    flex-wrap: wrap;
}

.flexbox {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    flex-grow:1;
    flex-shrink:0;
    width:300px;
    height:100px;
}

When the width of the browser window is more than 900px, all divs with the class .flexbox will be in one single horizontal line next to each other. When the width of the browser window is less than 900px the divs with the class .flexbox will go into 2 or three lines, depnding on browser width.

I want to style all divs that are in the second line. That means the following:

Browser width > 900px = no div is styled
Browser width < 900px and Browser width > 600px  = the third div is styed
Browser width < 600px  = the second div is styled

Is there a way to achieve that using css?

Thanks in advance

Do you mean applying styles to the element with `flex-wrap:wrap` applied, or getting an element to behave in similar way without using JavaScript? It's usually more effective to get help by providing some example code or an image that displays what you're trying to achieve. — Chris Rockwell, Oct 29 '13 at 18:54
here's a similar question: http://stackoverflow.com/questions/19574851/how-to-specify-an-element-after-which-to-wrap-in-css-flex/19576595#19576595 — 2507rkt3, Oct 29 '13 at 19:06
Related: http://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid — cimmanon, Oct 29 '13 at 19:08
"is styled" isn't a very useful description. If "is styled" means "I want it to be pink", then no. If it means "I want it to resize", then yes. — cimmanon, Oct 29 '13 at 19:26

score 2 · Accepted Answer · edited May 23 '17 at 11:44

No. Flexbox does not offer a way to style specific lines in a multi-line flex container.

Flexbox does allow flex items to resize based on their flex-basis value.

http://codepen.io/cimmanon/pen/GKEfD

.flexwrap {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) {
  .flexwrap {
    display: flex;
  }
}

.flexbox {
  -webkit-flex: 1 20em;
  -ms-flex: 1 20em;
  flex: 1 20em;
  height: 100px;
}

Note that this will not work with the 2009 Flexbox implementation:

While wrapping is specified, no browser implemented it
There is no flex-basis

Related: CSS3 flexbox adjust height of vertically aligned elements

So you would use JavaScript and jquery? – philkunz Oct 29 '13 at 19:20 — philkunz, Oct 29 '13 at 19:20

CSS Flex Box --- flex-wrap:wrap; How to style a specific line?

1 Answers1