微信小程序查看：flex布局教程

微信小程序 View支持两种布局方法：Block和Flex，默认情况下所有视图都是块

要使用flex布局，您需要一个明确的声明：

显示: flex;

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

从一个简单的演示开始

123

再加上背景颜色可以更清晰地看到

.main {0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0背景色: greenyellow; }

那么可能就是这样：

Snip_20170213230726

然后我们首先添加display: flex

那么可能就是这样：

然后我们首先添加display: flex

好好利用flex布局，想法，看起来像视图不会自动继承，需要在每个想要使用的视图中添加。

第一个是水平布局和垂直布局。要设置属性flex-direction，它有4个可选值：

行：从左到右的水平方向是主轴

行反转：从右到左的水平方向是主轴

列：从上到下的垂直方向是主轴

柱反转：从下到上的垂直方向是主轴

让我们看一下设置行和行反转之间的区别：

行：

行反向：

然后我们想要在水平方向上设置元素的布局方向。我们需要设置justify-content属性，该属性有5个值可供选择：

弯曲启动：主轴启动对齐（默认）

Flex-end：主轴端点对齐

中心：以主轴为中心

空格：有道理，除了两端的子元素与两端的容器相对，其他子元素之间的间距相等

空间：每个子元素之间的距离相等，两端子元素之间的距离与其他子元素之间的距离相同

然后我们需要在垂直方向上设置元素的布局方向。我们需要设置align-items属性，它有5个值：

拉伸填充整个容器（默认）

flex-start侧轴的起点是对齐的（这里我们手动设置下一个视图的高度，这很明显）

柔性端侧轴的末端对齐

中心位于侧轴

基线与子元素的第一行文本对齐

子视图还有一个属性align-self，它覆盖父元素的align-items属性。它有六个值：auto | flex-start | flex-end |中心|基线| stretch（auto是父元素align -items属性，其他与align-items一致）

例如，在上面的最后一个基线示例中，我们将item3设置为align-self: flex-end;

就像这样：

还有一个flex-wrap属性可以控制子视图是否包装。有3个值可供选择：

Nowrap：没有换行符（默认）

换行：换行

Wrap-reverse：Wrap，第一行在底部

还有一个子视图，其中包含一个order属性，用于控制子元素的排序。默认值为0.

例如，在上面的例子中，我们将item3设置为order: -1;我们可以把item3放在前面

flex的常见布局就是这样。

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。