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.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

回答1:

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

回答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.