微信小程序样式Flex Box精通课程-Flex容器的属性-flex-direction 项目排列方向
flex-direction 项目排列方向
基础语法
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精通课程 https://edu.****.net/course/detail/10624
微信小程序样式Flex Box精通课程