flex 布局

用flex 布局做微信小程序的页面，请多多指教
html

<!--index.wxml-->
<view class="container">
  <view class='top'>
    <view class='top_in'>

      <view class='top_left'>
        销售累计 ( {{userInfo.nickName}} )
        <view class='top_left_num'>0</view>
      </view>
      <view class='user_img'>
        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      </view>

    </view>
    <view class="top_bottom_out">
      <view class='top_bottom'>
        <view class="top_bottom_li">推广员
          <text>ID123456</text> </view>
        <view class="top_bottom_li">元宝
          <text>0</text> </view>
        <view class="top_bottom_li">帮助</view>
      </view>
    </view>
  </view>
  <view class="model">
    <view class='model_left'>
      <view class='model_left_num'>
        <text class='red'>0</text>
      </view>
      <view>当前库存</view>
    </view>
    <view class='model_right'>
      <view>本月已进卡
        <text class='red'>1</text>张</view>
      <view>总进卡数
        <text class='red'>12</text>张</view>
    </view>
  </view>
  <view class='tu_out'>
    <view class='tu'>
      <view class="tu_li">
        <view class="tu_li_in">
          <view class="tu_li_img_out">
            <image bindtap="bindViewTap" class="tu_li_img" src="{{userInfo.avatarUrl}}" mode="cover"></image>
          </view>

          <text class="tu_li_text">进货</text>
        </view>
      </view>


      <view class="tu_li">
        <view class="tu_li_in">
          <view class="tu_li_img_out">
            <image bindtap="bindViewTap" class="tu_li_img" src="{{userInfo.avatarUrl}}" mode="cover"></image>
          </view>

          <text class="tu_li_text">玩家充值</text>
        </view>

      </view>
      <view class="tu_li">
        <view class="tu_li_in">
          <view class="tu_li_img_out">
            <image bindtap="bindViewTap" class="tu_li_img" src="{{userInfo.avatarUrl}}" mode="cover"></image>
          </view>

          <text class="tu_li_text">用卡查询</text>
        </view>

      </view>
    </view>
  </view>
  <view class='title'>
    <text class='title_text'>新闻</text>
    <view class='title_ul'>
      <view class='title_li'>
        <view class='title_li_left'>
          1.static：元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或者多个行框，置于其父元素中
        </view>
        <view class='title_li_right'>
          2018-10-26 >
        </view>

      </view>
      <view class='title_li'>
        <view class='title_li_left'>
          2.static：元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或者多个行框，置于其父元素中
        </view>
        <view class='title_li_right'>
          2018-10-26 >
        </view>
      </view>
      <view class='title_li'>
        <view class='title_li_left'>
          3.static：元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或者多个行框，置于其父元素中
        </view>
        <view class='title_li_right'>
          2018-10-26 >
        </view>
      </view>
    </view>
  </view>

  <view class="userinfo">
  <block>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
</view>
css:
/**index.wxss**/

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
  margin-top: 50rpx;
}

.top {
  background-color: #0b889e;
  background-image: linear-gradient(90deg, #0b889e, #15b2ab, #13b3ab); /*背景渐变 */
  width: 100%;
  height: 300rpx;
}

.top_in {
  padding: 20rpx 20rpx;
  font-size: 24rpx;
  height: 128rpx;
}

.top_left {
  float: left;
  color: #fff;
}

.user_img {
  float: right;
  width: 128rpx;
  height: 128rpx;
}

.top_bottom {
  padding: 20rpx 20rpx;
  font-size: 24rpx;
  display: flex;
  justify-content: center;
  color: #fff;
}

.top_bottom_out {
  margin-top: 40rpx;
}

.top_bottom_li {
  width: 100%;
  text-align: center;
  border-right: 1px solid #fff;
}

.top_bottom li:last-child {
  border-right: none;
}

/* 中间 */

.model {
  width: 100%;
  margin: 20rpx auto;
  display: flex;
  justify-content: center;
  font-size: 28rpx;
}

.model_left {
  width: 100%;
  padding-left: 20rpx;
  float: left;
}

.model_right {
  width: 100%;
  padding-right: 20rpx;
  text-align: right;
  float: right;
}

.model_left_num {
  text-indent: 2em;
}

.red {
  color: red;
}

.tu_out {
  width: 100%;
  margin-bottom: 50rpx;
}

.tu {
  padding: 0rpx 20rpx;
  display: flex;
  justify-content: center;
}

.tu_li {
  width: 100%;
  height: 130rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  background-color: yellow;
  margin-right: 25rpx;
}

.tu .tu_li:nth-child(1) {
  background-color: #3bac1c;
}

.tu .tu_li:nth-child(2) {
  background-color: #487bee;
}

.tu .tu_li:nth-child(3) {
  background-color: #f1a641;
  margin-right: 0rpx;
}

.tu_li_in {
  color: #fff;
  padding: 15rpx 20rpx;
  flex-direction: column;
  display: flex;
}

.tu_li_img_out {
  display: flex;
  margin-bottom: 30rpx;
}

.tu_li_img {
  border-radius: 50%;
  width: 40rpx;
  height: 40rpx;
}

.tu_li_text {
  text-align: right;
  width: 100%;
  height: 100%;
}

.title {
  width: 100%;
  padding: 15rpx 20rpx 0rpx;
  border-top: 2px solid #ededed;
  position: relative;
}

.title_text {
  display: flex;
  padding: 0 25rpx;
  background-color: #fff;
  position: absolute;
  top: -23rpx;
  left: 45%;
  font-size: 26rpx;
}

.title_ul {
  width: 100%;
  margin-top: 15rpx;
  font-size: 24rpx;
}

.title_li {
  margin: 15rpx 20rpx;
  line-height: 60rpx;
  font-size: 30rpx;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #eee;
  color: #81848c;
}

.title_li_left {
  width: 75%;
  overflow: hidden;
  text-overflow: ellipsis; /*多余变成点点点 */
  white-space: nowrap;
}

.title_li_right {
  width: 25%;
  overflow: hidden;
  text-overflow: ellipsis; /*多余变成点点点 */
  white-space: nowrap;
}

.top_left_num {
  font-size: 60rpx;
}