Flexbox Layout Pattern 1/3

I'm looking for some help with preparing layout pattern in flexbox, the thing is that I will have a set of divs printed inside container and I can not change the rendering logic (i

Solution 1:

To the contrary, this layout is possible using flexbox, with a slight modification to your markup. Here's a working example: http://codepen.io/timothylong/pen/XRrBBW

The HTML:

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

The SCSS:

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

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

Solution 2:

What you want to do is not posible with flex-box as is pointed in link provided by @Michael_B

You can generate something really close to what you want using floats:

.boxed {
  width:100%;
  background:#fff;
  overflow:hidden;
}
.boxeddiv {
  height:50px;
  margin:4px;
  background:#f5f5f5;
  width:calc(40% - 16px);
  float: left;
}

.boxeddiv:nth-child(6n + 1), .boxeddiv:nth-child(6n + 4) {
  background:salmon;
  height:108px;
  width:60%;
}

 .boxeddiv:nth-child(6n + 4), div:nth-child(6n + 5),  div:nth-child(6n + 6) {
   float: right;
 }

<divclass="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 big block aligned to right is changed to be 6n+4 instead of 6n+6