Revision - Flex Box - proportions

by andfinally

HTML

<section class="wrapper">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  <div class="box box4"></div>
  <div class="box box5"></div>
  <div class="box box6"></div>
  <div class="box box7"></div>
  <div class="box box8"></div>
  <div class="box box9"></div>
  <div class="box box10"></div>
</section>

SCSS

.box1 {
  background: red;
}

.box2 {
  background: purple;
}

.box3 {
  background: blue;
}

.box4 {
  background: indigo;
}

.box5 {
  background: green;
}

.box6 {
  background: goldenrod;
}

.box7 {
  background: brown;
}

.box8 {
  background: crimson;
}

.box9 {
  background: cornflowerblue;
}

.box10 {
  background: aliceblue;
}

.wrapper {
  display: flex;
  height: 100px;
}

.box {
  flex: 1;
}

.box4 {
  flex: 4;
}