<div class="flex-container" id="fd-row">
   <div class="flex-item">1</div>
   <div class="flex-item">2</div>
   <div class="flex-item">3</div>
 </div>
 <div class="flex-container" id="fd-row-reverse">
   <div class="flex-item">1</div>
   <div class="flex-item">2</div>
   <div class="flex-item">3</div>
 </div>
 <div class="flex-container" id="fd-column">
   <div class="flex-item">1</div>
   <div class="flex-item">2</div>
   <div class="flex-item">3</div>
 </div>
 <div class="flex-container" id="fd-column-reverse">
   <div class="flex-item">1</div>
   <div class="flex-item">2</div>
   <div class="flex-item">3</div>
 </div>

/* global style */

.flex-container {
  display: flex;
  margin: 20px;
  background-color: rgba(211, 211, 211, 0.2);
  border: 1px dashed grey;
}

.flex-container:first-child,
.flex-container:nth-child(3n + 2) {
  width: 200px;
}

.flex-container:nth-child(n + 3) {
  height: 200px;
  width: min-content;
}

.flex-item {
  background-color: lightskyblue;
  margin: 5px;
  padding: 8px 14px;
  text-align: center;
}
/* ...................................
......................................
......................................*/

/* flex-direction values */
#fd-row {
  flex-direction: row; /*default*/
}

#fd-row-reverse {
  flex-direction: row-reverse;
}

#fd-column {
  flex-direction: column;
}

#fd-column-reverse {
  flex-direction: column-reverse;
}