flex-direction属性决定主轴的方向（即项目的排列方向），这里的排列方向可以理解为水平方向和垂直方向。示意图如7-3所示。

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

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

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

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

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

1.小程序默认排版

下面代码显示5个长度和宽度都是100px的方块（本章都沿用该代码）。

.wxml文件代码示例

小白教程网www.2d5.net

<view>
   <view>
    <text>01</text>
  </view>
  <view  class='fangxing'>
    <text>02</text>
  </view>
  <view  class='fangxing'>
    <text>03</text>
  </view>
  <view  class='fangxing'>
    <text>04</text>
  </view>
  <view  class='fangxing'>
    <text>05</text>
  </view>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

.zong{
  padding: 10px; /*内边距*/
}
.fangxing{
  width: 100px;
height: 100px; 
  background-color:  beige;
  margin: 10px; /*每个方框的外边距*/
}

每个view会占用一行，类似于div是块级元素。效果见图7-4。

2.flex-direction: row

.wxml文件不变（沿用默认排版的代码），增加flex显示模式。

.wxss文件代码示例

小白教程网www.2d5.net

.zong{
 padding: 10px;
   display: flex;
   flex-direction:  row; /* row是默认值，该行样式可以省略 */
/* row 默认，可以不写：row | row-reverse | column | column-reverse*/
}
.fangxing{
   width: 100px; height: 100px; 
   background-color:  beige;
   margin: 10px;
}

       效果如图7-5所示。

提示：flex-direction: row让容器内的元素按行排列，同时默认不换行。display: flex;设置后flex-direction的属性设置才会生效。

3.flex-direction: row-reverse

.wxml文件不变（沿用默认排版的代码），设置容器的样式flex-direction: row-reverse。

.wxss文件代码示例

小白教程网www.2d5.net

.zong{

  display: flex;

  flex-direction: row-reverse;

  padding: 10px;/*内边距*/

}

效果图

小白教程网www.2d5.net

4.flex-direction: column

.wxml文件不变（沿用默认排版的代码），设置容器的样式flex-direction: column。

.wxss文件代码示例

小白教程网www.2d5.net

.zong{
  display: flex;
  flex-direction: column;
  padding: 10px;/*内边距*/
}

效果图

小白教程网www.2d5.net

5.flex-direction: column-reverse

.wxml文件不变（沿用默认排版的代码），设置容器的样式flex-direction: column。

.wxss文件代码示例

小白教程网www.2d5.net

.zong{
  display: flex;
  flex-direction: column-reverse;
  padding: 10px;/*内边距*/
}

效果如图7-8所示。