微信小程序：Flex布局

1.display ：显示的模式。可选项有：flex（代表view可以伸缩，弹性布局）…
2.flex-direction ：view容器主轴布局方向。可选项有：row ， column
3.justify-content ：view容器子元素沿着主轴的排列方式。可选项有：flex-start、center、flex-end、space-around…
4.align-items ：view容器子子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。可选项有：flex-start、center、flex-end…
5.flex :权重。可选项：1，2, 3, 4, 5…(flex与display属性一般结合使用，单独使用flex无效)

微信小程序默认布局是水平布局：

垂直布局：

wxml文件：

<view class='index-container'>
  <image class='logo' src='../image/logos.png'></image>
  <text class='username'>你的名字......</text>
  <view class='btn'>
  <text>往期文章</text>
  </view>
</view>

 添加垂直布局样式：

.index-container{
        display: flex;
        flex-direction: column;
        align-items: center;
 }