微信小程序學習（一）之view組件

一、實現效果

二、代碼部分

<!--學習view組件-->
<view class="title">學習view組件</view>
<view class="student">2016/11/22 [email protected]</view>
<view>
    <text>
    \n1、從今天開始好好學習WeApp\n
    2、我的理解是view相當於h5中的div,用來劃分頁面大塊區域。\n
    3、目錄下只要有wxml文件就能運行，其他格式文件都可以忽略沒有。\n
    4、但目錄下如果有.json格式文件就不能爲空，否則無法運行。\n
    </text>
</view>
<view><text>\n下面學習幾種排列法：彈性框模型</text></view>
<view>
    <text>\n彈性框模型分爲彈性容器以及彈性項目。\n當組件的display爲flex或inline-flex時，該組件則爲彈性容器，彈性容器的子組件爲彈性項目。</text>
    <text>\n
    flex-direction：主要兩個特性”row”橫向排列”column”縱向排列\n
    justify-content 主軸的對齊方式（如果flex-direction爲row則主軸就是水平方向）\n
    可選屬性 (‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)\n
    align-items 側軸對齊方式如果flex-direction爲row則側軸就是垂直方向）\n
    可選屬性 (‘flex-start’, ‘flex-end’, ‘center’）\n\n</text>
</view>
<view class="section">
    <view>flex-direction:row</view>
    <view class="flex-wrp" style="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>flex-direction:column</view>
    <view class="flex-wrp" style="height:300px;flex-direction:column;">
        <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><text>flex-direction:row \n justify-content:flex-start</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content:flex-start;">
        <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><text>flex-direction:row \n justify-content:flex-end</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content:flex-end;">
        <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><text>flex-direction:row \n justify-content:center</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content: center;">
        <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><text>flex-direction:row \n justify-content:space-between</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content: space-between;">
        <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><text>flex-direction:row \n justify-content:space-around</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content: space-around;">
        <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><text>flex-direction:row \n justify-content:center \n align-items:flex-end</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content: center;align-items: flex-end; height: 200px;border:1px solid #cccccc;">
        <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><text>flex-direction:row \n justify-content:center \n align-items:center</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content: center;align-items: center; height: 200px;border:1px solid #cccccc;">
        <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><text>flex-direction:row \n justify-content:center \n align-items:flex-start</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content: center;align-items: flex-start; height: 200px;border:1px solid #cccccc;">
        <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>
<!--參考：/u014360817/article/details/52658350-->