Geek Answers Handbook

Make a full element of a flexible element after wrapping it without using media queries

Using flexbox here. Is it possible to make the overlapping element full width after it has been pressed without media processes?

See attached plunker: http://plnkr.co/edit/mxACfJ2VR5yNgP9j8WJh?p=preview Resize the preview window to a width of less than 425 pixels. The third element is discarded, and then I want to make it full width. When it is on the same line as the other 2 elements, it should not grow.

css:

.flexContainer { display:flex; flex-wrap:wrap; border: 1px solid; } .img { width:110px; height:110px; background:red; } .flexItem { flex-basis:200px; flex-grow:1; background:#ff1; } .wrapItem { flex-basis:100px; background:#aab; }

HTML:

 <div class="flexContainer"> <div class="img">fixed size img here</div> <div class="flexItem">This flexes</div> <div class="wrapItem">This wraps</div> </div>
+7
css flexbox css3
source share
2 answers

You cannot do this. But you can get closer.

Just set the growth of the flex element to a huge value (9999) and increase the wrap element to 1

  .flexContainer { display:flex; flex-wrap:wrap; border: 1px solid; } .img { width:110px; height:110px; background:red; } .flexItem { flex-basis:200px; flex-grow:9999; background:#ff1; } .wrapItem { flex-basis:100px; flex-grow:1; background:#aab; } 
  <body> <div class="flexContainer"> <div class="img">fixed size img here</div> <div class="flexItem">This flexes</div> <div class="wrapItem">This wraps</div> </div> </body>
+6
source share

You did not tell this element that it is allowed to grow by adding flex-grow:1

 .flexContainer { display:flex; flex-wrap:wrap; border: 1px solid; } .img { width:110px; height:110px; background:red; } .flexItem { flex-basis:200px; flex-grow:1; background:#ff1; } .wrapItem { flex-grow:1; flex-basis:100px; background:#aab; } 
 <div class="flexContainer"> <div class="img">fixed size img here</div> <div class="flexItem">This flexes</div> <div class="wrapItem">This wraps</div> </div>

JSfiddle Demo

+1
source share

More articles:


All Articles