Flexbox 1/3 Layout Template

Question

I am looking for some help in preparing a layout template in flexbox, the fact is that I will have a set of divs printed inside the container and I cannot change the rendering logic (i.e. add some wrapper lines), but, I would like to get something like that:

Unfortunately, it got stuck every time, the results were not satisfactory at all: / The height of these divs is fixed, 1 is the sum of 2 + 3 + clearance.

https://jsfiddle.net/zechkgf4/

[] 

Thank you in advance

Answer 1

What you want to do is not possible with the flex-box, as indicated in the link provided by @Michael_B

You can create something really close to what you want to use float:

 .boxed { width:100%; background:#fff; overflow:hidden; } .boxed div { height:50px; margin:4px; background:#f5f5f5; width:calc(40% - 16px); float: left; } .boxed div:nth-child(6n + 1), .boxed div:nth-child(6n + 4) { background:salmon; height:108px; width:60%; } .boxed div:nth-child(6n + 4), div:nth-child(6n + 5), div:nth-child(6n + 6) { float: right; } 

 <div class="boxed"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> 

Note that the large block aligned to the right changes to 6n + 4 instead of 6n + 6

Answer 2

On the contrary, this layout can be used with flexbox, with a slight modification to your layout. Here is a working example: http://codepen.io/timothylong/pen/XRrBBW

HTML:

 <main> <section class="large item"> 1 (Large) </section> <div class="small"> <section class="item"> 2 (Small) </section> <section class="item"> 3 (Small) </section> </div> </main> 

SCSS:

 main { display: flex; flex-flow: row; .item { display: flex; flex: 1; } .large { flex: 0 0 60%; } .small { display: flex; flex-direction: column; } } 

The .small shell allows us to stack the two smaller modules vertically using flex-direction: column .