2018-03-01-2再学组件

view组件
官网给的代码其实不能跑起来的，其实必须修改WXML文件与添加WXSS文件，最后我将自己写的代码贴出来

<!--pages/component/view.wxml-->
<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="display:flex;flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300rpx;flex-direction:column; display:flex;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

/* pages/component/view.wxss */
.section{
  flex-direction: row
}
.section__title{
  flex-direction: row
}
.flex-wrp{
  flex-direction: row
}
.flex-item {
  width: 100rpx;
  height: 100rpx;
}
.bc_green{
  background: greenyellow;
  text-align:center;
}
.bc_red{
  background: red;
  text-align: center;
}
.bc_blue{
  background: blueviolet;
  text-align: center;
}

注意：
1.布局不加这行代码display:flex; 是无法显示水平布局的
2.设置宽高，rpx的单位不能丢失，丢失了宽高的设置无效。
3.选择器（.flex-item）设置整体，而选择器（.bc_green）设置局部的WXSS显示样式