Main Axis - flex-direction: row

a
b
c
      
        <!-- HTML -->
        <div class="row container">
          <div class="item">a</div>
          <div class="item">b</div>
          <div class="item">c</div>
        </div>
      
    
      
        /* CSS */
        .row {
          display: flex;
          /* Valor padrão, não precisa ser declarado,
          coloquei aqui para fins didáticos. */
          flex-direction: row;
        }

Main Axis - flex-direction: row-reverse

a
b
c
      
        <!-- HTML -->
        <div class="row-reverse container">
          <div class="item">a</div>
          <div class="item">b</div>
          <div class="item">c</div>
        </div>
      
    
      
        /* CSS */
        .row-reverse {
          display: flex;
          flex-direction: row-reverse;
        }

Main Axis - flex-direction: column

a
b
c
      
        <!-- HTML -->
        <div class="col container">
          <div class="item">a</div>
          <div class="item">b</div>
          <div class="item">c</div>
        </div>
      
    
      
        /* CSS */
        .col {
          display: flex;
          flex-direction: column;
        }

Main Axis - flex-direction: column-reverse

a
b
c
      
        <!-- HTML -->
        <div class="col-reverse container">
          <div class="item">a</div>
          <div class="item">b</div>
          <div class="item">c</div>
        </div>
      
    
      
        /* CSS */
        .col {
          display: flex;
          flex-direction: column-reverse;
        }

flex-wrap: nowrap

a
b
c
      
        <!-- HTML -->
        <div class="nowrap container">
          <div class="item">a</div>
          <div class="item">b</div>
          <div class="item">c</div>
        </div>
      
    
      
        /* CSS */
        .nowrap {
          display: flex;
          flex-wrap: nowrap;
        }

flex-wrap: wrap

a
b
c
      
        <!-- HTML -->
        <div class="wrap container">
          <div class="item">a</div>
          <div class="item">b</div>
          <div class="item">c</div>
        </div>
      
    
      
        /* CSS */
        .wrap {
          display: flex;
          flex-wrap: wrap;
          align-content: flex-start;
        }