Layout possible? Flexbox vs Float layout with multiple columns and rows

css, flexbox

Solution

Flexbox does not like flex items that expand through multiple columns or rows, because in fact flexbox has no grid notion.

However, using some tricks, you can achieve this layout (and more complicated ones too):

Use a row layout

┌─┬─┬─┬─┐
│1│2│3│4│
└─┴─┴─┴─┘

Allow line breaks with `flex-wrap: wrap`.

Use a pseudo element to force a line break after 2

┌─┬─┐
│1│2│
├─┼─┤
│3│4│
└─┴─┘

Use `flex: 1` on all flex items.

┌─────────┬─────────┐
│1        │2        │
├─────────┼─────────┤
│3        │4        │
└─────────┴─────────┘

Set `margin-left: 50%` to 3

┌─────────┬─────────┐
│1        │2        │
└─────────┼────┬────┤
          │3   │4   │
          └────┴────┘

Set `height: 200px`, to 2, 3 and 4. Set `height: 400px` to 1.

┌─────────┬─────────┐
│1        │2        │
│         ├─────────┘
│         │
└─────────┼────┬────┐
          │3   │4   │
          └────┴────┘

Set `margin-bottom: -200px` to 1:

┌─────────┬─────────┐
│1        │2        │
│         ├────┬────┤
│         │3   │4   │
└─────────┴────┴────┘

Since you have borders, use `box-sizing: border-box` on all boxes to make `height` include the borders. Otherwise 1 would need `height: 416px; margin-bottom: -216px`.

Note flexbox introduces `auto` as the new initial value of `min-width`. That could allow the content to force some boxes to grow. That would break the layout, so disable it with `min-width: 0` or setting `overflow` to anything but `visible`.

Here is the code:

.features {
  display: flex;
  flex-flow: row wrap;
}
.feature {
  background: #ccc;
  border: 8px solid #fff;
  height: 200px;
  box-sizing: border-box;
  min-width: 0;
  flex: 1;
}
.feature-1 {
  /* Make it taller without increasing the height of the flex line */
  height: 400px;
  margin-bottom: -200px;
}
.features:after {
  /* Force line break */
  content: '';
  width: 100%;
}
.feature-2 ~ .feature {
  /* Place 3 and 4 after the line break */
  order: 1;
}
.feature-3 {
  margin-left: 50%;
}

<div class="features">
  <div class="feature feature-1">1</div>
  <div class="feature feature-2">2</div>
  <div class="feature feature-3">3</div>
  <div class="feature feature-4">4</div>
</div>

However, it would be easier to modify the HTML in order to have nested flexboxes.

#wrapper {
  height: 400px;
}
.flex {
  display: flex;
}
.column {
  flex-direction: column;
}
.flex > div {
  min-width: 0;
  flex: 1;
}
.item {
  background: #ccc;
  border: 8px solid #fff;
}

<div id="wrapper" class="flex row">
  <div class="item">1</div>
  <div class="flex column">
    <div class="item">2</div>
    <div class="flex row">
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </div>
</div>

Problem

Original source