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


Tags: css,flexbox

Problem :

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



Solution :

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


    CSS Howto..

    How to optimize an image sequence in Chrome?

    How to move the scrollbar down

    Contact page Design how to add Bootstrap

    How to align multiple images horizontally (in a row)?

    jQuery - Navbar hover did not show

    How to create a folding ribbon heading with inside gradient?

    CSS How to apply child:hover but not parent:hover

    Inner div has borders - how to override with a class on an outer div?

    How do I keep multiple DIVs the same height using jQuery?

    How to get a background image to work in CSS and HTML?

    How to ensure each DIV appears on it's own without overlapping

    How can I hide page elements till an AJAX call completes?

    How to put
      around image in css

    How to make IFrame fill width of screen

    How to prevent an absolutely positioned element to affect the scrollbar?

    How to determine the 'toggle' status of a CSS toggle input?

    CSS select: how to count and select child of a specific class only?

    How to apply CSS3 rendering for optimal performance

    How to configure CSS with Spring MVC and Tiles

    Content attribute in CSS to show image icon

    How would can i keep horizontal divs (3 in a row) with margins inbetween them inline with wrapper?

    How can i return a navmenu button to previous style after clicking another button

    How to set the width of a jQuery Mobile 1.4 responsive Panel in percentage?

    Text and image in div - How to align correctly?

    how to change color of href on hover

    How to blend an image with a solid colour in CSS?

    Cache policy, css/js/images how to make them not to load each time i do full postback?

    how to save responsive menu open/close value?

    How to verify that google web font is working or not?

    css. How to write (code) css for different window widths?