微信小程序之 flex 布局最详细讲解 ！！！

2. flex-direction: column-reverse; （垂直反向）

2.2 Flex 中 justify-content 属性

这里把盒子的大小改一下，并且设置主轴为 row，如果想尝试多种效果的，可以自行修改主轴方向

.container {

display: flex;

flex-direction: row; // 设置默认的布局

}

.s1 {

width: 50px;

height: 50px;

background-color: aquamarine;

}

.s2 {

width: 50px;

height: 50px;

background-color: rebeccapurple;

}

.s3 {

width: 50px;

height: 50px;

background-color: greenyellow;

}

.s4 {

width: 50px;

height: 50px;

background-color: red;

}

2.2.1 flex-start 左居中布局

给 父容器 justify-content 的属性设置 为 flex-start，因为小程序默认的也是 flex-start

flex-start 和 inital 效果相似

.container {

display: flex;

flex-direction: row;

justify-content: flex-start;

}

2.2.2 flex-end 右居中布局

.container {

display: flex;

flex-direction: row;

justify-content: flex-end;

}

2.2.3 center 水平居中布局

.container {

display: flex;

flex-direction: row;

justify-content: center;

}