微信小程序-组件-View

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

微信小程序-组件-View

推荐阅读更多精彩内容