在前端设计中微信小程序里的css布局常用弹性盒进行布局
原理展示
原理:https://www.runoob.com/css3/css3-flexbox.html
代码展示
/* 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;
}
效果展示
![](https://i-blog.csdnimg.cn/blog_migrate/c87109a8f165ac8b28f3de46f241d1e6.png)
前端布局训练
青蛙闯关游戏:http://flexboxfroggy.com/