1、打开开发者工具，在项目pages文件夹下，新建mypage文件夹，并在文件夹下新建page，名为mypage，在app.json配置文件中，将mypage设为第一页面。
2、在mypage.wxml添加代码如下：
<view class='outer'>
<view class='v'>
1
</view>
<view class='v2'>
2
</view>
<view class='v'>
3
</view>
<view class='v4'>
4
</view>
</view>
3、在mypage.wxml中写代码如下：
.outer{
width: 600rpx;
height: 800rpx;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.v2{
width: 100rpx;
height: 100rpx;
background-color: rebeccapurple;
}
.v{
width: 100rpx;
height: 100rpx;
background-color: rebeccapurple;
}
.v4{
width: 100rpx;
height: 200rpx;
background-color: rebeccapurple;
}
注意align-items属性是容器用的，而且容器要设置display：flex能有效，
align-items决定的是元素或元素内容在侧轴的排列。
4、保存代码，查看效果如下图，元素横排在左上
5、将mypage.wxss代码改为
align-items: flex-end;
保存代码查看效果如下图，元素横排在左下
6、单独设置v4样式，使其flex布局，设置align-items属性，修改代码如下：
.outer{
width: 600rpx;
height: 800rpx;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.v2{
width: 100rpx;
height: 100rpx;
background-color: rebeccapurple;
}
.v{
width: 100rpx;
height: 100rpx;
background-color: rebeccapurple;
}
.v4{
width: 100rpx;
height: 200rpx;
display: flex;
align-items: flex-end;
background-color: rebeccapurple;
}
7、保存代码，效果如下图，内层的第四个view的内容按照flex-end排列了，说明
align-items对view中内容同样有效
8、设置外层view的align-items为baseline，修改代码如下：
.outer{
width: 600rpx;
height: 800rpx;
display: flex;
flex-direction: row;
align-items: baseline;
}
.v2{
width: 100rpx;
height: 100rpx;
background-color: rebeccapurple;
}
.v{
width: 100rpx;
height: 100rpx;
background-color: rebeccapurple;
}
.v4{
width: 100rpx;
height: 200rpx;
display: flex;
align-items: flex-end;
background-color: rebeccapurple;
}
9、保存代码，查看效果如下图，这次排列是保持内层view的内容在同一条基线上
