小程序:flex垂直布局

View容器

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

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

Flex布局

给view容器添加类名container:

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

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

添加WXSS:

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

效果：.