微信小程序开发之初识flex布局进行垂直分布布局

微信小程序开发之初识flex布局进行垂直分布布局
代码如下：

1. display: flex;
   
2. flex-direction: column;

复制代码

实例：
wxml代码：

1. <view class="container">
   
2.     <image class="avater" src="/images/touxiang/1.jpg"></image>
   
3.     <text>金黑出品，必属精品</text>
   
4.     <view>
   
5.         <text>开启小程序之旅</text>
   
6.     </view>
   
7. </view>

复制代码

wxss代码：

1. .container{
   
2.     display: flex;
   
3.     flex-direction: column;
   
4. }

复制代码

解说：flex-direction默认为row横向显示，属性改成column竖向显示。