CSS Flex Box

 

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

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

    链接地址: http://www.djcxy.com/p/75692.html

    上一篇: 包装：收缩前收缩

    下一篇: CSS Flex Box