微信小程序样式Flex Box精通课程-Flex容器的属性-flex-direction 项目排列方向

flex-direction 项目排列方向

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

基础语法
flex-direction属性决定主轴的方向（即项目的排列方向）：（左中右 上中下）

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

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

小程序应用
小程序-默认排版
下面代码显示5个长度和宽度都是100px的方块（本章节都沿用该代码）。
效果见图

Wxml代码

<view class='zong'>
   <view class='fangxing'>
    <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代码

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

说明：每个view会占用一行，类似我们的div是块级元素。

flex-direction: row
效果如图

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

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

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

flex-direction: row-reverse
效果图如图

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

Wxss代码

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

flex-direction: column
效果如图

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

Wxss代码

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

flex-direction: column-reverse
效果如图

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

Wxss代码

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

欢迎大家收看我的视频教程：微信小程序界面设计布局Flex Box精通课程 （微信小程序界面设计必备技能）