位置:电子教程 > Flex Box小程序应用 (如果看不到内容请使用360浏览器) 推荐学习资源
Flex Box基本概念
Flex容器的属性
Flex项目的属性
Flex布局样例
当前阅读教程:Flex Box小程序应用 > 排列方向(flex-direction)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: Flex容器的属性 下一篇: 项目换行(flex-wrap)

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

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

image.png

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

image.png


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所示。

image.png


提示: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

如图7-6所示。


image.png



4.flex-direction: column

.wxml文件不变(沿用默认排版的代码),设置容器的样式flex-direction: column

.wxss文件代码示例

小白教程网www.2d5.net

如下:

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

效果图

小白教程网www.2d5.net

7-7所示

image.png


5.flex-direction: column-reverse

.wxml文件不变(沿用默认排版的代码),设置容器的样式flex-direction: column

.wxss文件代码示例

小白教程网www.2d5.net

如下:

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

效果如图7-8所示。

image.png


上一篇: Flex容器的属性 下一篇: 项目换行(flex-wrap)
毕业设计网             广告联系QQ:45157718(微信同号)