综合教程

微信小程序flex box界面设计入门到精通-02课-flex容器属性-flex-direction项目排列方向

时间:2019/1/6 10:11:49  作者:互联网  来源:网络转载  查看:56357  评论:0
内容摘要:基础语法flex-direction属性决定主轴的方向(即项目的排列方向):(左中右    上中下).box { flex-direction: row | row-reverse | column | column-reverse; }᠋...

基础语法

flex-direction属性决定主轴的方向(即项目的排列方向):(左中右    上中下)

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

微信小程序flex_box界面设计入门到精通-02课-flex容器属性-flex-direction项目排列方向
 row(默认值):主轴为水平方向,起点在左端。
 row-reverse:主轴为水平方向,起点在右端。
 column:主轴为垂直方向,起点在上沿。
 column-reverse:主轴为垂直方向,起点在下沿。

2 小程序应用

小程序-默认排版

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

效果见图
微信小程序flex_box界面设计入门到精通-02课-flex容器属性-flex-direction项目排列方向


Wxm代码

<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

效果如图
微信小程序flex_box界面设计入门到精通-02课-flex容器属性-flex-direction项目排列方向

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

效果图如图
微信小程序flex_box界面设计入门到精通-02课-flex容器属性-flex-direction项目排列方向

wxml不变(沿用默认排版的代码),设置容器的样式flex-direction: row-reverse
Wxss代码

.zong{

  display: flex;

  flex-direction: row-reverse;

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

}

 

flex-direction: column

效果如
微信小程序flex_box界面设计入门到精通-02课-flex容器属性-flex-direction项目排列方向

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

Wxss代码

.zong{

  display: flex;

  flex-direction: column;

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

}


flex-direction: column-reverse

效果如图

微信小程序flex_box界面设计入门到精通-02课-flex容器属性-flex-direction项目排列方向

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

Wxss代码

.zong{

  display: flex;

  flex-direction: column-reverse;

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

}


欢迎大家支持我的视频课程

微信小程序样式Flex Box精通课程

https://ke.qq.com/course/368348?tuin=2bea1eb0
微信小程序flex_box界面设计入门到精通-01课-概述

相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |