<div class="top-section">
  <div class="current-setting">
    <p><span id="setting">flex-direction: row</span></p>  
  </div>
  <button onclick="setFlex()">Toggle flex-direction</button>
</div>

<div class="container">
  <span id="horizontal-axis">Main Axis</span>
  <span id="vertical-axis">Cross Axis</span>
  <div id="fi1">
    <p>1</p>
  </div>
  <div id="fi2">
    <p>2</p>  
  </div>
  <div id="fi3">
    <p>3</p>  
  </div>
</div>

.container {
  display: flex;
  flex-direction: row;
}

#fi1 {

}

#fi2 {

}

#fi3 {

}



/* Pre-configured styles.  Not important to tutorial */

* {
  box-sizing: border-box;
}

.container {
  margin-left: 40px;
  margin-top: 40px;
  width: 300px;
  height: 200px;
  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;
}

#fi1 {
  background-color: #255954;
}

#fi2 {
  background-color: #3A8C7D;
}

#fi3 {
  background-color: #71D99E;
}

#fi1, #fi2, #fi3 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

#fi1 p, #fi2 p, #fi3 p {
  font-size: 1.5rem;
  margin: 0;
}

#fi1 p, #fi2 p {
  color: #71D99E;
}

#fi3 p {
  color: #1E4040;
}

#setting {
  color: #1E4040;
  font-size: 1.5rem;
  font-weight: 500;
}

.buttons {
  margin-bottom: 20px;
}

button {
  background-color: #1E4040;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px;
}

button:hover {
  cursor: pointer;
}

.top-section {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  padding-left: 45px;
}

function setFlex() {
  const el  = document.querySelector('.container');
  const newSetting = el.style.flexDirection === 'column' ? 'row' : 'column';
  const vAxis = newSetting === 'row' ? 'Cross Axis' : 'Main Axis';
  const hAxis = newSetting === 'column' ? 'Cross Axis' : 'Main Axis';
  el.style.flexDirection = newSetting;
  document.querySelector('#vertical-axis').textContent = vAxis;
  document.querySelector('#horizontal-axis').textContent = hAxis;
  document.querySelector('span').textContent = `flex-direction: ${newSetting}`;
}