Menu
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
749
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:
Related: CSS3 flexbox adjust height of vertically aligned elements
56
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
