- flex-direction 弹性容器的方向
(1) flex-direction:row 横向
<!--index.wxml-->
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
<!--index.wxss-->
.page-section{
margin-bottom: 20rpx;
}
.flex-wrp {display: flex;}
.bc_green {background: green;width:100px; height: 100px;}
.bc_red {background: red;width:100px; height: 100px;}
.bc_blue {background: blue;width:100px; height: 100px;}
效果
1529654520848.jpg
(2) flex-dierction:column 纵向
<!--index.wxml-->
<view class="section">
<view class="section__title">flex-direction: column</view>
<view class="flex-wrp" style="height: 300px;flex-direction:column;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
效果
1529654552152.jpg
-
justify-content 视图在屏幕中的位置
(1) justify-content:flex-start 位于屏幕的左边
(2) justify-content:flex-end 位于屏幕的右边
(3) justify-content:center 位于屏幕的中间
(4) justify-content:space-between 均匀分布
(5) justify-content:space-around 均匀分布，并且两边会留有空间
1529655285521.jpg
<!--index.wxml-->
<view class="section">
<view class="section__title"> justify-content: flex-start</view>
<view class="flex-wrp" style="flex-direction:row;justify-content:flex-start">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
<view class="section">
<view class="section__title"> justify-content: flex-end</view>
<view class="flex-wrp" style="flex-direction:row;justify-content:flex-end">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
<view class="section">
<view class="section__title"> justify-content: center</view>
<view class="flex-wrp" style="flex-direction:row;justify-content:center">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
<view class="section">
<view class="section__title"> justify-content: space-between</view>
<view class="flex-wrp" style="flex-direction:row;justify-content:space-between">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
<view class="section">
<view class="section__title"> justify-content: space-around</view>
<view class="flex-wrp" style="flex-direction:row;justify-content:space-around">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
- align-item 视图在屏幕中的位置
属性和代码同justify-content一样
4.hover
(1) hover-class:'String' 制定按下去的样式类。当hover-class='none'时，没有点击态效果
(2) hover-stop-propagation:'Booleasn' 指定是否阻止本节点的祖先节点出现点击态
(3) hover-start-time:'Numer' 按住后多久出现点击态，单位毫秒，1000毫米=1秒
(4) hover-stay-time:'Number' 手指松开后点击保留时间，单位毫秒
<!--index.wxml-->
<view class="section">
<view class="flex-item bc_green" hover-class='tap_yellow' hover-start-time='1000' hover-stay-time='2000'>1</view>
</view>
<!--index.wxss-->
.page-section{
margin-bottom: 20rpx;
}
.bc_green {background: green;width:100px; height: 100px;}
.tap_yellow {
background: yellow;
}
1.gif
