Flexbox layout pattern 1/3

Question

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.e. add some wrapping rows), yet, I'd like to get something like this:

Unfortunately got stuck every time, results weren't satisfactory at all :/ Height of those divs is fixed, 1 is a sum of 2 + 3 + gap.

https://jsfiddle.net/zechkgf4/

[]

Thank you in advance

http://stackoverflow.com/a/39645224/3597276 – Michael Benjamin Oct 18 '16 at 00:19 — Michael Benjamin, Oct 18 '16 at 00:19

longforshort · Answer 1 · 2017-04-11T23:26:09.017

2

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>
    <section class="large item">
        1 (Large)
    </section>
    <div class="small">
        <section class="item">
            2 (Small)
        </section>
        <section class="item">
            3 (Small)
        </section>
    </div>
</main>

The 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 wrapper allows us to stack the two smaller modules vertically using flex-direction: column.

edited Apr 11 '17 at 23:26

answered Apr 11 '17 at 23:10

longforshort

84
1
8

Thank you for your response, but as I said: I can not change the rendering logic (i.e. add some wrapping rows). That was the tricky part. – Maciej Kwas Apr 13 '17 at 06:53
@MaciejKwas, you can't change the rendering logic? Even with jQuery? – KillerDesigner Apr 02 '19 at 15:29
@KillerDesigner this question has already been solved three years ago. Thank you. – Maciej Kwas Apr 02 '19 at 16:53

score 1 · Accepted Answer · edited May 23 '17 at 10:30

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;
}
.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 big block aligned to right is changed to be 6n+4 instead of 6n+6

Flexbox layout pattern 1/3

2 Answers2

Linked