zoukankan      html  css  js  c++  java
  • Flex:实例

    目的:

    代码:

    <!--pages/index/index.wxml-->
    <view class="container">
      <view class="top">
        <text class="top_left">1</text>
        <view class="top_right">
          <text class="top_right_high">2</text>
          <text class="top_right_low">3</text>
        </view>
      </view>
      <view class="buttom">
        <view class="buttom_left">
          <text class="buttom_left_high">4</text>
          <text class="buttom_left_low">5</text>
        </view>
        <view class="buttom_right">
          <text class="buttom_right_high">6</text>
          <text class="buttom_right_low">7</text>
        </view>
      </view>
    </view>
    /* pages/index/index.wxss */
    /* 全局 */
    .container{
      display: flex;
      flex-direction: column;
    }
    /* 上半部 */
    .top{
      height: 50vh;
      display: flex;
      flex-direction: row;
    }
    .top_right{
      display: flex;
      flex-direction: column;
    }
    .top_left{
      height: 600rpx;
       375rpx;
      background-color: red;
    }
    .top_right_high{
      height: 300rpx;
       375rpx;
      background-color: gold;
    }
    .top_right_low{
      height: 300rpx;
       375rpx;
      background-color: blue;
    }
    /* 下半部 */
    .buttom{
      height: 50vh;
      display: flex;
      flex-direction: row;
    }
    .buttom_right{
      display: flex;
      flex-direction: column;
    }
    .buttom_left{
      display: flex;
      flex-direction: column;
    }
    .buttom_right_high{
      height: 300rpx;
       375rpx;
      background-color: lightcoral;
    }
    .buttom_right_low{
      height: 300rpx;
       375rpx;
      background-color: hotpink;
    }
    .buttom_left_high{
      height: 300rpx;
       375rpx;
      background-color:  aqua;
    }
    .buttom_left_low{
      height: 300rpx;
       375rpx;
      background-color: green;
    }
  • 相关阅读:
    PAT (Basic Level) Practice (中文)1076 Wifi密码 (15 分)
    PAT (Basic Level) Practice (中文)1047 编程团体赛 (20 分)
    PAT (Basic Level) Practice (中文)1029 旧键盘 (20 分)
    PAT (Basic Level) Practice (中文)1016 部分A+B (15 分)
    延迟加载
    Js之全局函数
    Js之数组
    前端性能优化
    排序算法小结
    CSS居中总结
  • 原文地址:https://www.cnblogs.com/pam-sh/p/12327567.html
Copyright © 2011-2022 走看看