flex布局之flex-direction

版权声明：本文为博主原创文章，未经博主允许不得转载。
flex-direction有四个值，分别是row,column,row-reverse,column-reverse,它们之间的效果如图所示：

<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为：

.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;
 }

效果如图所示：