微信小程序View支持两种布局方式： 和 Flex

所有视图均为默认视图

要使用弹性布局，你需要明确声明它（向父元素）：

：柔性;

接下来我们来介绍一下微信小程序的Flex布局

我们先做一个简单的demo

=“主要” =“”1/ =“”2/ =“”3/查看/查看

添加背景颜色可以使其更清晰

.main{:100%;-:;}.item{:;:;}.{-:红色;}.{-:;}.{-:;}

那么它可能会看起来像这样：

然后给.main（父元素）添加flex样式属性：

善用弹性布局

首先，对于水平和垂直布局，我们需要给父元素设置flex-属性，它有四个可选值： row：水平方向从左到右为主轴 row-：水平方向从右到左为主轴：垂直方向从上到下为主轴 -：垂直方向从下到上为主轴 我们来看看设置row和row-的区别：

排：

排-：

然后我们需要设置元素的水平布局方向，这就需要设置-属性，该属性有5个值可以选择：

flex-：对齐主轴起点（默认值）

flex-end：对齐主轴的终点

：主轴中心

s*-：两端对齐，除两端的子元素外，其他子元素之间的间距相等。

-：每个子元素之间的距离相等，并且两端子元素与容器之间的距离也和其他子元素之间的距离相同。那么我们需要设置元素在垂直方向上的布局方向，就需要设置-属性，该属性有5个值可以选择：

填满整个容器（默认）

flex-side轴的起点对齐（这里我们手动设置了子视图的高度，以使其更加明显）

flex-end 对齐横轴的终点

横轴中心

还有一个属性-self用来让子View与子元素文本首行对齐，可以覆盖父元素的-属性。它有6个值可以选择：auto|flex-|flex-end|||（auto是继承父元素的-属性，其他和-相同）。比如上面最后一个例子，我们设置了-self:flex-end;就变成了这样：

另外还有一个flex-wrap属性，用来控制子View是否换行，有3个值可以选择： no wrap（默认） wrap:换行 wrap-:换行，第一行在最下面。还有一个子View的属性，可以控制子元素的顺序，默认值是0，比如上面的例子，我们设置：-1;，让它放在最前面。

这些是常见的弹性布局

如果你正在编写微信小程序，可以尝试一下。