Menu
Using flexbox here. Is it possible to make overlapping element full width after it has been pushed down without media queries?
See attached plunker: http://plnkr.co/edit/mxACfJ2VR5yNgP9j8WJh?p=preview Resize preview window to less than 425px width. Third element get's pushed down and then I want to make it full width. When it is in the same line as other 2 elements it must 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> 
526
When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100% , and enable wrap on the container. The item now consumes all available space.
You can use the flex-grow property to force an item to fill the remaining space on the main axis of a flex container. The item will expand as much as possible and occupy the free area.
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
You can combine flexbox with media queries to create a layout that responds to different sized screens. Media queries are commonly used in responsive designs in order to display a different layout to different devices, depending on their screen size.
You can not do that. But you can get pretty close.
Just set the grow on the flex item to a huge value (9999) and grow on the wrap item 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>You haven't told that 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
35
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
