查看“小程序:flex垂直布局”的源代码

==View容器==
view相当于一个容器，类似div标签

 <nowiki>
<view>
    <image class="avatar" src="/images/2.png"></image>
    <text>Hello ,大家好 ！</text>
    <button>开启小程序之旅</button>
</view>
</nowiki>


==Flex布局==
给view容器添加类名container:

这里用到了flex布局及其属性。

 <nowiki>
<!--pages/yes/yes.wxml-->
<view class="container">
    <image class="avatar" src="/images/2.png"></image>
    <text>Hello ,大家好 ！</text>
    <button>开启小程序之旅</button>
</view>
</nowiki>

添加WXSS:

 <nowiki>
/* pages/yes/yes.wxss */
.avatar{
  width:274rpx;
  height:271rpx;
  margin-top:160rpx;
}
.container{
  display:flex;
  flex-direction: column;
}
</nowiki>

效果：.

[[文件:wexin21041002.png|300px]]