关于多个view的排版问题

这两天做微信小程序，发现一个问题，就是我想要将多个view组件内容进行排版，经过查阅与个人总结最终有个答案。

其实最重要的就是：  view的嵌套  以及    view的排列 。

首先我先讲一下view的排列，这块内容在微信文档里也有：view排列。

先给大家看一段代码：

  display: flex;
  flex-direction: row;
  justify-content: flex-start;

在这里我们用  flex-direction: row 来进行view组件的排列方向，一共有一下几种：

 1>row：从左到右的水平方向为主轴(默认值)

 2>row-reverse：从右到左的水平方向为主轴

 3>column：从上到下的垂直方向为主轴

 4>column-reverse：从下到上的垂直方向为主轴

其中 justify-content有以下内容：

 1>flex-start：主轴起点对齐(默认值)

 2>flex-end：主轴结束点对齐

 3>center：在主轴中居中对齐

 4>space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等

 5>space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同

看到这里你结合微信文档内容就会多个组件的排列。接下来是view的嵌套：

这也是最简单的，比如你需要这样显示

在这里你只需要;

<view class='view333'>
  <view class='view3'>这里是健身</view>
  <view class='view33'>
    <view class='view4'>这里是跑步</view>
    <view class='view5'>这里是骑行</view>
  </view>
</view>

如果觉得不错的话点个赞再走吧！