微信小程序开发技术教程：视图容器组件详解（一）

微信小程序开发的时候，需要设计一个视图容器组件的问题，它有多种视图样式，每一种都有需要注意的内容。所以小编打算整理一下相关教程，为大家介绍一下微信小程序的视图容器组件。今天就先说两个样式，剩下的我们下一期再详解

视图容器：

就和HTML的DIV差不多，可以被其他组件包含，也可以包含着其他的组件，用起来比较方便，没有固定的结构

1、视图样式flex-direction: row

效果图：

WXML代码如下：

<view>

    <view class="flex-item red" ></view>

    <view class="flex-item green" ></view>

    <view class="flex-item blue" ></view>

</view>

WXSS代码如下：

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}

2、视图样式flex-direction: column

效果图：

WXML代码如下：

<view class="flex-wrp column">

    <view style="background: red"></view>

    <view style="background: green"></view>

    <view style="background: blue"></view>

</view>

WXSS代码如下：

.column{

   flex-direction:column;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}