微信小程序校园个人主页显示前端---flex布局

先上图。简陋但不失内容，咳咳。

wxml

<!--pages/xiaoyuanka/home/home.wxml-->
<!-- 未获取用户信息状态 -->
<view wx:if="{{!loginOK}}" class="first">
  <view class="first_1_">123</view>
  <view class="first_2_">
    <view class="name">
    <text>张同学</text>
    </view>
    <view class="first_2_1">
    <text style="font-weight: bold;">学院：</text><text>计算机科学与技术学院</text>
    </view>
    <view class="first_2_1">
    <text style="font-weight: bold;">班级：</text><text>1607</text>
    </view>
    <view class="first_2_1">
    <text style="font-weight: bold;">学号:</text><text>2115280026</text>
    </view>
  </view>
</view>
<!-- /未获取用户信息状态 -->

<!-- 已获取用户信息状态 -->
<view wx:if="{{loginOK}}" class="first_1">
  <view>
    
  </view>
</view>
<!-- /已获取用户信息状态 -->

<demo-block title="功能" class="second">
  <van-cell title="金额查询" icon="user-circle-o" is-link  bindtap="goto1" />
  <van-cell title="消费历史查询" icon="comment-o" is-link  bindtap="goto2" />
</demo-block>

wxss

/* pages/xiaoyuanka/home/home.wxss */
.first{
  display: flex; /*flex布局*/
  flex-direction: row;  /*容器内项目按主轴方向排列，横着拍*/
  justify-content:space-around; /* 行内项目均匀排列，靠两边的缝隙空间相加 为中间项目排列的缝隙*/
  align-content:space-around; /*当大于一行时 每行项目排列方式同上*/
  align-items:center ;/*首先想象这个容器的高度，容器内所有的项目位于这个容器高度的中间，多行则按多行的方式排列，就是align-content*/
  width: 100%;
  height: 400rpx;
  background: #d7f0db
}
.first_1_{
  height: 300rpx;
  width: 250rpx;
  background: #C4723C
}
.first_2_{
  height: 380rpx;
  width: 380rpx;
  background: #66AA55;
  display: flex; /*flex嵌套布局*/
  flex-direction: column;
  justify-content:space-around;
  
}

.first_2_1{
  height: 80rpx;
  width: 100%;
  /* border: 2rpx solid black; */
  line-height: 40rpx; 
}

.name{
  height: 80rpx;
  width: 100%;
  /* border: 2rpx solid black; */
  line-height: -40rpx; /*行间距*/
  letter-spacing:20rpx;/*字符间距*/
  font-size: 60rpx;
  color: #C4723C;
  text-align: center;
}

页面下面的两个图标用的是vant-weapp 链接 https://github.com/youzan/vant-weapp

关于Flex布局的详细介绍： 链接 https://www.cnblogs.com/jianxian/p/11124585.html