微信小程序学习笔记（一）——css小技巧

微信小程序——css小技巧
1、子类元素的横排与竖排
    .父类{
        display: flex;
        flex-direction: row; //横排
        flex-direction: column; //竖排
    }
2、margin-right：20px有可能会失效
    解决办法：外围包裹一层<view>使用padding-right：20px；
2、scroll滚动
    竖向滚动
         <scroll-view scroll-y="false" class="scl_y">
            <view class="red1"></view>
            <view class="blue2"></view>
            <view class="green3"></view>
            <view class="yellow4"></view>
         </scroll-view>
        .scl_y{
            height: 100px; //设置父高度
        }
        .scl_y view{
            height: 100px; //设置子高度
        }
    横向滚动：
        <scroll-view scroll-x="true"  class="scl_x">
            <view class="red1"></view>
            <view class="blue2"></view>
            <view class="green3"></view>
            <view class="yellow4"></view>
        </scroll-view>
        .scl_x{
          white-space: nowrap;  //设置不换行
        }
        .scl_x view{
          width: 100%;
          display: inline-block;
          height: 100px;
        }