微信小程序开发技术教程：视图容器组件详解（一）
2018-12-26 22:55:25
微信小程序开发的时候，需要设计一个视图容器组件的问题，它有多种视图样式，每一种都有需要注意的内容。所以小编打算整理一下相关教程，为大家介绍一下微信小程序的视图容器组件。今天就先说两个样式，剩下的我们下一期再详解
视图容器：
就和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;
}