flex layout of flex-direction

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed.
flex-direction has four values, namely, row, column, row-reverse, column-reverse, as shown in FIG effect between them:

<div class="row">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="column">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="row-reverse">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="column-reverse">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>

css is:

.row {
     display: flex;
     flex-direction: row;
 }
 .row div {
     width: 200px;
     height: 200px;
     background: pink;
     margin: 10px;
 }
 .column {
     display: flex;
     flex-direction: column;
 }
 .column div {
     width: 200px;
     height: 200px;
     background: pink;
     margin: 10px;
 }
 .row-reverse {
     display: flex;
     flex-direction: row-reverse;
 }
 .row-reverse div {
     width: 200px;
     height: 200px;
     background: pink;
     margin: 10px;
 }
 .column-reverse {
     display: flex;
     flex-direction: column-reverse;
 }
 .column-reverse div {
     width: 200px;
     height: 200px;
     background: pink;
     margin: 10px;
 }

Results as shown: