Flex box with 1 item twice the size of other items, but still keep everything inline like a grid system

Question

Ive got a flexbox layout that has all the items the same size, apart from one which is twice the width of the other items, but the same height.

The issue im having at the moment is that the top row of the flexbox items are not lining up with the rest of the rows in the flexbox which all contain items of the same width.

Ive made a jsfiddle of the issue here : http://jsfiddle.net/4e8c0w9z/

Any idea if this can be achevied ? I was looking at grid system, but they all seem to work around a fixed number of columns per grid, with break points. Rather than a flexbox which allows for any number of items per row.

Answer 1

I feel you have a little mathematically problem here. Your .box2 is not exactly twice as big as .box . Even though you use box-sizing: border-box; you have to keep in mind the margin of the items if you want the gaps to line up properly. Here is a demo of what is happening, when you set the width of .box2 to 180px (150 + 15 + 15)

 body { box-sizing: border-box; height:100%; background: #336633; } .wrapper { display:flex; flex-direction:row; flex-wrap: wrap; } .box { width: 75px; height: 100px; background: white; margin: 15px; } .box2 { width: 180px; height: 100px; background: white; margin: 15px; }

 <div class="wrapper"> <div class="box2"></div> <!--THIS IS THE 2 width box--> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <!--wrapper-->

Here is a little addition from @JoshBurgess to make it a little bit more flex ible. With this you don't set a specific width but make use of the flex-basis property .

 body { box-sizing: border-box; height:100%; background: #336633; } .wrapper { display:flex; flex-direction:row; flex-wrap: wrap; } .box { flex: 0 1 75px; height: 100px; background: white; margin: 15px; } .box2 { flex: 0 1 180px; height: 100px; background: white; margin: 15px; }

 <div class="wrapper"> <div class="box2"></div> <!--THIS IS THE 2 width box--> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <!--wrapper-->

Answer 2

I see the first item of the flex box's width is double. But what if the width and height both are double than others. how to solve that ?