.container.flex-row
  .flex-line.flex-start
    .item.one
    .item.two
    .item.three
    .label flex-start
  .flex-line.flex-end
    .item.one
    .item.two
    .item.three
    .label flex-end
  .flex-line.center
    .item.one
    .item.two
    .item.three
    .label center
  .flex-line.space-between
    .item.one
    .item.two
    .item.three
    .label space-between
  .flex-line.space-around
    .item.one
    .item.two
    .item.three
    .label space-around
    
    
.container.flex-column
  .flex-line.flex-start
    .item.one
    .item.two
    .item.three
    .label flex-start
  .flex-line.flex-end
    .item.one
    .item.two
    .item.three
    .label flex-end
  .flex-line.center
    .item.one
    .item.two
    .item.three
    .label center
  .flex-line.space-between
    .item.one
    .item.two
    .item.three
    .label space-between
  .flex-line.space-around
    .item.one
    .item.two
    .item.three
    .label space-around

:root {
  font-size: 16px;
  --red: #ee4d2d;
  --yellow: #ffa604;
  --blue: #16b6fb;
  --dark: #42355e;
  --main: 500px;
  --track-size: 3rem;
  font-family: Futura, sans-serif;
}

.flex-start {
  justify-content: flex-start;
}

.flex-end {
  justify-content: flex-end;
}

.center {
  justify-content: center;
}

.space-between {
  justify-content: space-between;
}

.space-around {
  justify-content: space-around;
}

.flex-line {
  display: flex;
  background: var(--dark);
  position: relative;
  
}

.flex-row {
  flex-direction: column;
  justify-content: center;
  .flex-line {
    margin-bottom: 5px;
  }
  .one {
    width: 18%;
  }
  .two {
    width: 15%;
  }
  .three {
    width: 30%;
  } 
}

.flex-column {
  justify-content: center;
  .flex-line {
    flex-direction: column;
    width: var(--track-size);
    margin-right: 5px;
  }

  .one {
    height: 18%;
  }
  .two {
    height: 15%;
  }
  .three {
    height: 30%;
  }
  .label {
    writing-mode: tb;
  }
}


.container {
  width: var(--main);
  height: var(--main);
  margin: 0 auto;
  display: flex;
}

.item {
  height: var(--track-size);
}
.one {
  background: var(--red);
}
.two {
  background: var(--yellow);
}
.three {
  background: var(--blue);
}
.label {
  width: 100%;
  height: 100%;
  font-size: 1.5rem;
  position: absolute;
  background: var(--dark);
  top: 0;
  left: 0;
  line-height: var(--track-height);
  text-align: center;
  color: white;
  mix-blend-mode: overlay;
}