1.支付宝案例--布局应用

flex弹性布局

index.wxml

<view class="container">
  <view class='blue-group'>

    <view class='top-group'>

      <view class='search-group'>
        <input class='search-input' placeholder="蚂蚁花呗"></input>
      </view>
      <view class='more-group'>
        <image src='images/01.png'></image>
        <image src='images/02.png'></image>
      </view>
    </view>

    <view class='main-menu-group'>
      <view class='main-menu'>
        <image src='images/1.png'></image>
        <text>扫一扫</text>
      </view>
      <view class='main-menu'>
        <image src='images/2.png'></image>
        <text>付钱</text>
      </view>
      <view class='main-menu'>
        <image src='images/3.png'></image>
        <text>收钱</text>
      </view>
      <view class='main-menu'>
        <image src='images/4.png'></image>
        <text>卡包</text>
      </view>
    </view>
  </view>

  <view class='white-group'>
     <view class='menu-group'>
      <image src='images/5.png'></image>
      <text>转账</text>
     </view>
     <view class='menu-group'>
      <image src='images/6.png'></image>
      <text>信用卡还款</text>
     </view>
     <view class='menu-group'>
      <image src='images/7.png'></image>
      <text>充值中心</text>
     </view>
     <view class='menu-group'>
      <image src='images/8.png'></image>
      <text>余额宝</text>
     </view>
     <view class='menu-group'>
      <image src='images/9.png'></image>
      <text>淘票票电影</text>
     </view>
     <view class='menu-group'>
      <image src='images/10.png'></image>
      <text>滴滴出行</text>
     </view>
     <view class='menu-group'>
      <image src='images/11.png'></image>
      <text>生活费用</text>
     </view>
     <view class='menu-group'>
      <image src='images/12.png'></image>
      <text>芝麻信用</text>
     </view>
     <view class='menu-group'>
      <image src='images/13.png'></image>
      <text>火车票机票</text>
     </view>
     <view class='menu-group'>
      <image src='images/14.png'></image>
      <text>蚂蚁借呗</text>
     </view>
     <view class='menu-group'>
      <image src='images/15.png'></image>
      <text>高德打车</text>
     </view>
     <view class='menu-group'>
      <image src='images/16.png'></image>
      <text>更多</text>
     </view>
  </view>
</view>

index.wxss

.blue-group{
  background: #1e83d2;
  padding:20rpx;
}

.blue-group .top-group{
  height: 58rpx;
  width:100%;
  display: flex;
}

.top-group .search-group{
  flex:1;
  display: flex;
}
.top-group .search-group .search-input{
  flex:1;
  background: #ffffff;
  border-radius: 2px;
  padding: 0 10rpx;
  font-size: 24rpx;
}

.top-group .more-group{
  flex-basis: 180rpx;
  display: flex;
  justify-content: space-evenly;
}

.top-group .more-group image{
  width:50rpx;  /**要设置这个宽度，不然会影响flex-basis: 180rpx的布局;图片可能比他大**/
  height:50rpx; 
}

.blue-group .main-menu-group{
  margin-top: 30rpx;
  display: flex;
  justify-content: space-around;
  margin-bottom: 15rpx;/**margin是在子容器里面设置的外边距，padding在父容器设置的内边距**/
}
.main-menu-group .main-menu {
  width: 100rpx;
  height: 120rpx;
  text-align: center;   /**main-menu里面的 image和text都是行级元素不设置宽度会在一行**/
}

.main-menu-group .main-menu image{
  width: 70rpx;
  height: 70rpx;
}
.main-menu-group .main-menu text{
  font-size: 32rpx;
  color: #fff
}

.white-group{
  background: #ffffff;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-top: 20rpx;

} 
.white-group .menu-group{
  width: 180rpx;
  height:100rpx;
  display: flex;
  
  flex-direction: column;/**主轴切换为侧轴，图片和文字上下排列；上面的4个菜单汉字在下面是通过设置宽度，让行级元素自动换行**/
  
  justify-content: space-between;
  
  align-items: center;/**轴切换了，此时左右为侧轴，居中**/
  margin-bottom: 40rpx;

}

.white-group .menu-group image{
  width: 54rpx;
  height:50rpx;
}

.white-group .menu-group text{
  font-size: 32rpx;
}