Maciej Kwas Maciej Kwas - 1 month ago 12
Less Question

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:

desired layout

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

Answer

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

Comments