Flex layout

by firegroove

HTML

<div class="space">
  <div class="area-wrapper column">
    <div class="area wrap row">
      <div class="area column area1">Box 1</div>
      <div class="area column area2">Box 2</div>
    </div>
    <div class="area wrap row">
      <div class="area wrap column area-5">
        <div class="area wrap row">
          <div class="area column area3">Box 3</div>
          <div class="area column area4">Box 4</div>
          <div class="area wrap column area-1">
            <div class="area row area5">Box 5</div>
            <div class="area row area7">Box 7</div>
          </div>
        </div>
        <div class="area row area8">Box 8</div>
      </div>
      <div class="area column area6">Box 6</div>
    </div>
  </div>
</div>

CSS

.area-wrapper,
.column,
.row {
  display: flex;
  justify-content: space-between;
  flex: auto;
}

.column {
  flex-direction: column;
}

.row {
  flex-direction: row;
  flex-wrap: wrap;
}

.area {
  border: 2px solid red;
}

.area {
  padding: 0.5em;
  margin: 0.15em;
}

.wrap {
  margin: 0;
  padding: 0;
  border: 0px;
}

.area-1 {
  flex: 1;
}

.area-5 {
  flex: 5;
}

.area1 {
  flex: 3;
}

.area2 {
  flex: 3;
}

.area3 {
  flex: 2;
}

.area4 {
  flex: 2;
}

.area5 {
  flex: 1;
}

.area6 {
  flex: 1;
}