<div class="flex-container">
  <span id="horizontal-axis">Main Axis</span>
  <span id="vertical-axis">Cross Axis</span>
  <div class="fi flex-item-1"><p>1</p></div>
  <div class="fi flex-item-2"><p>2</p></div>
  <div class="fi flex-item-3"><p>3</p></div>
  <div class="fi flex-item-4"><p>4</p></div>
  <div class="fi flex-item-5"><p>5</p></div>
  <div class="fi flex-item-6"><p>6</p></div>
  <div class="fi flex-item-7"><p>7</p></div>
  <div class="fi flex-item-8"><p>8</p></div>
  <div class="fi flex-item-9"><p>9</p></div>
</div>

* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
}

.flex-item-1 {
  flex-shrink: 1;
}

.flex-item-2 {
  flex-shrink: 1;
}

.flex-item-3 {
  flex-shrink: 1;
}

.flex-item-4 {
  flex-shrink: 1;
}

.flex-item-5 {
  flex-shrink: 1;
}

.flex-item-6 {
  flex-shrink: 1;
}

.flex-item-7 {
  flex-shrink: 1;
}

.flex-item-8 {
  flex-shrink: 1;
}

.flex-item-9 {
  flex-shrink: 1;
}

/* Don't worry about anything below this.  It is not important
    for the example */
.flex-container {
  margin-left: 40px;
  margin-top: 40px;
  width: 408px;
  height: 200px;
  box-sizing: border-box;
  border: 4px solid #212226;
  position: relative;
}

#horizontal-axis {
  position: absolute;
  top: -30px;
  font-weight: 900;
}

#vertical-axis {
  position: absolute;
  left: -80px;
  transform-origin: bottom right;
  transform: rotate(-90deg);
  font-weight: 900;
}

.fi {
  background-color: #255954;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid #71D99E;
  width: 50px;
  height: 50px;
}

.fi p {
  font-size: 1.5rem;
  margin: 0;
  color: #71D99E;
}