微信小程序-组件-View

1. flex-direction 弹性容器的方向

(1) flex-direction:row 横向

  flex-direction: row
  
    1
    2
    3
  

.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 纵向

  flex-direction: column
  
    1
    2
    3
  

效果

1529654552152.jpg

2. 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

   justify-content: flex-start
  
    1
    2
    3
  
 

 
   justify-content: flex-end
  
    1
    2
    3
  
 

 
   justify-content: center
  
    1
    2
    3
  
 

 
   justify-content: space-between
  
    1
    2
    3
  
 

 
   justify-content: space-around
  
    1
    2
    3
  
 

3. 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' 手指松开后点击保留时间，单位毫秒

  1

.page-section{
  margin-bottom: 20rpx;
}
.bc_green {background: green;width:100px; height: 100px;}
.tap_yellow {
  background: yellow;
}

1.gif