flex-direction容器属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

这将建立主轴，从而定义Flex项目放置在Flex容器中的方向。Flexbox（除了可选包装）是单向布局概念。将flex项目视为主要布置在水平行或垂直列中。

它可能有4个值。

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

案例
row：（默认值）主轴为水平方向，起点在左端

 <div class="flex-direction">
        <div class="row">
            <p>我是第一个flex-direction：row</p>
        </div>
        <div class="row">
            <p>我是第二个flex-direction：row</p>
        </div>
        <div class="row">
            <p>我是第三个flex-direction：row</p>
        </div>
    </div>

    .flex-direction{
           display: flex;
           display: -webkit-flex;
           flex-direction: row;
           width: 500px;
           height: 200px;
           margin: auto;
       }
       .row{
           width: 150px;
           height: 160px;
           border: 1px  black solid;
           background-color: aqua;
       }

效果图

row-reverse：主轴为水平方向，起点在右端。

 <div class="flex-direction">
        <div class="row_reverse">
            <p>我是第一个flex-direction：row-reverse</p>
        </div>
        <div class="row_reverse">
            <p>我是第二个flex-direction：row-reverse</p>
        </div>
        <div class="row_reverse">
            <p>我是第三个flex-direction：row-reverse</p>
        </div>
    </div>

 .flex-direction{
            display: flex;
            display: -webkit-flex;
            flex-direction: row-reverse;
            width: 500px;
            height: 200px;
            margin: auto;
        }
       .row_reverse{
           width: 150px;
           height: 180px;
           border: 1px #000000 solid;
           background-color: palegoldenrod;
       }

column：主轴为垂直方向，起点在上沿。

 <div class="flex-direction">
        <div class="column">
            <p>我是第一个flex-direction：column</p>
        </div>
        <div class="column">
            <p>我是第二个flex-direction：column</p>
        </div>
        <div class="column">
            <p>我是第三个flex-direction：column</p>
        </div>
    </div>

    .flex-direction{
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            width:500px;
            height: 300px;
            margin: auto;
        }
        .column{
            width: 130px;
            height: 280px;
            border: 1px black solid;
            background-color: gold;
        }

column-reverse：主轴为垂直方向，起点在下沿。

<div class="flex-direction">
        <div class="column-reverse">
            <p>我是第一个flex-direction：column-reverse</p>
        </div>
        <div class="column-reverse">
            <p>我是第二个flex-direction：column-reverse</p>
        </div>
        <div class="column-reverse">
            <p>我是第三个flex-direction：column-reverse</p>
        </div>
    </div>

   .flex-direction{
            display:flex;
            display: -webkit-flex;
            flex-direction: column-reverse;
            width: 500px;
            height: 300px;
            margin: auto;
        }
        .column-reverse{
            width: 150px;
            height: 200px;
            border: 1px black solid;
            background-color: lawngreen;
        }