-3

enter image description here

Example:

Is it possible to built this kind of layout with flex without nesting? Purely, with a structure like this:

<div class="long">
</div>

<div class="short">
</div>

<div class="short">
</div>

<div class="short">
</div>

<div class="short">
</div>
splash
  • 12,817
  • 1
  • 42
  • 65
alex
  • 6,381
  • 12
  • 41
  • 70

1 Answers1

1

Sure. See below

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  max-height: 200px;
  max-width: 320px;
}

.long {
  background-color: red;
  border: thin solid darkgray;
  width: 100px;
  height: 200px;
}

.short {
  background-color: blue;
  border: thin solid darkgray;
  width: 100px;
  height: 100px;
}
<div class="container">
  <div class="long"></div>
  <div class="short"></div>
  <div class="short"></div>
  <div class="short"></div>
  <div class="short"></div>
</div>

*

Gerard
  • 14,447
  • 5
  • 28
  • 48
  • Thanks! One question: why is there a huge space between the colored divs? – alex Jun 09 '17 at 07:48
  • 1
    It's because by default the container div has a width 0f 100%. I have now defined the max-width in the code to reduce the space between the divs. – Gerard Jun 09 '17 at 07:54