-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
  • 13,037
  • 1
  • 44
  • 67
alex
  • 7,111
  • 15
  • 50
  • 77

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
  • 15,418
  • 5
  • 30
  • 52
  • 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