微信小程序 view 布局

刚看到这个效果的时候还真是和ReactNative的效果一致，属性也基本的一样. 
view这个组件就是一个视图组件使用起来非常简单。

主要属性：

flex-direction： 主要两个特性”row”横向排列”column”纵向排列

justify-content 主轴的对齐方式（如果flex-direction为row则主轴就是水平方向）

• 可选属性 (‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)

align-items 侧轴对齐方式如果flex-direction为row则侧轴就是垂直方向）

• 可选属性 (‘flex-start’, ‘flex-end’, ‘center’）

wxml

<view class="page">
    <view class="page__hd"> <text class="page__title">viewtext> <text class="page__desc">弹性框模型分为弹性容器以及弹性项目。当组件的display为flex或inline-flex时，该组件则为弹性容器，弹性容器的子组件为弹性项目。text> view> <view class="page__bd"> <view class="section"> <view class="section__title">flex-direction: rowview> <view class="flex-wrp" style="flex-direction:row;"> <view class="flex-item" style="background: red">view> <view class="flex-item" style="background: green">view> <view class="flex-item" style="background: blue">view> view> view> <view class="section"> <view class="section__title">flex-direction: columnview> <view class="flex-wrp" style="height: 300px;flex-direction:column;"> <view class="flex-item" style="background: red">view> <view class="flex-item" style="background: green">view> <view class="flex-item" style="background: blue">view> view> view> <view class="section"> <view class="section__title">justify-content: flex-startview> <view class="flex-wrp" style="flex-direction:row;justify-content: flex-start;"> <view class="flex-item" style="background: red">view> <view class="flex-item" style="background: green">view> <view class="flex-item" style="background: blue">view> view> view> <view class="section"> <view class="section__title">justify-content: flex-endview> <view class="flex-wrp" style="flex-direction:row;justify-content: flex-end;"> <view class="flex-item" style="background: red">view> <view class="flex-item" style="background: green">view> <view class="flex-item" style="background: blue">view> view> view> <view class="section"> <view class="section__title">justify-content: centerview> <view class="flex-wrp" style="flex-direction:row;justify-content: center;"> <view class="flex-item" style="background: red">view> <view class="flex-item" style="background: green">view> <view class="flex-item" style="background: blue">view> view> view> <view class=