微信小程序－view的创建和使用

今天写第一篇关于微信小程序的学习，view的创建和使用。

微信小程序开发需要学习基本的标签，这对我来说是一个挑战，不过加油啊。

1.创建一个View

在wxml中   <view class="section"></view>定义（容我这么说，对于iOS熟悉的人比较了解吧，不管对不对吧）。

在wxss中实现如下， 

.section {

  flex: 1;

  background-color: #ffff00;

  font-size: 16px;

padding: 10px;

  margin: 10px;

}

其中，background-color背景颜色，font-size是文字大小。padding文字与父试图之间的距离，margin整个空间与父视图中间距离。

2.view的样式

 <view style="display : flex;flex-direction:row">

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

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

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

 </view>

class是一个控件，style是样式，

"display : flex;flex-direction:row表示为横向布局。display : flex;flex-direction:column竖向布局。

display : flex;flex-direction:row;justify-content:flex-start  横向布局左侧开始

display : flex;flex-direction:row;justify-content:flex-end   横向布局右侧开始

display : flex;flex-direction:row;justify-content:center      横向布局居中

display : flex;flex-direction:row;justify-content:space-between     横向布局子控件分开排列，左右间距为0

display : flex;flex-direction:row;justify-content:space-around        横向布局子控件边上有环绕

display : flex;height:200px;flex-direction:row;justify-content:space-around;align-items:flex-start      横向布局子控件边上有环绕＋从上面开始 

display : flex;height:200px;flex-direction:row;justify-content:space-around;align-items:flex-end       横向布局子控件边上有环绕＋从下面开始  

display : flex;height:200px;flex-direction:row;justify-content:space-around;align-items:center          横向布局子控件边上有环绕＋从中间开始  

flex-item表示一个控件，在wuss中可定义如宽高，bc_green  bc_red  bc_blue 具体的颜色