微信小程序弹性盒布局

在前端设计中微信小程序里的css布局常用弹性盒进行布局

1. 原理展示

原理:https://www.runoob.com/css3/css3-flexbox.html

2. 代码展示

/* wxml文件 */
<view class="father">
    <view class="v1">no.1</view>
    <view class="v2">no.2</view>
    <view class="v3">no.3</view>   
</view>

 /* 弹性盒模型 wxss文件 */
.father{
     /*行排列，每个元素占一行  */
    width: 350px;
    height: 350px;
    border:2px solid black;
   /*1. 所有元素view共占一行 ->弹性盒模型 */
   display:flex;
    /*2. 垂直布局 */
    justify-content: center;
    
    /*3. 水平布局 */
    align-items: flex-end;
    /*4. 主轴与交叉轴替换 */
    flex-direction: column-reverse;
}
.father>view{
    width: 100px;
    height: 100px;

}
.v1{
    background-color: red;
    /* 5.交叉轴上元素到最后一个位置 */
    align-self: end;
    /* 6.次序默认为0，-1排在前面，数越大排在后面，1排在后面  */
    order: 1;
}
.v2{
    background-color: yellow;
}
.v3{
    background-color: blue;
}

    

3. 效果展示

4. 前端布局训练

青蛙闯关游戏：http://flexboxfroggy.com/