<view class="page">    <view class="page__hd">        <text class="page__title">view</text>        <text class="page__desc">彈性框模型分為彈性容器以及彈性項目。當組件的display為flex或inline-flex時，該組件則為彈性容器，彈性容器的子組件為彈性項目。</text>    </view>    <view class="page__bd">        <view class="section">            <view class="section__title">flex-direction: row</view>            <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: column</view>            <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-start</view>            <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-end</view>            <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: center</view>            <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="section">            <view class="section__title">justify-content: space-between</view>            <view class="flex-wrp" style="flex-direction:row;justify-content: space-between;">                <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: space-around</view>            <view class="flex-wrp" style="flex-direction:row;justify-content: space-around;">                <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">align-items: flex-end</view>            <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: 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">align-items: center</view>            <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: 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="section">            <view class="section__title">align-items: center</view>            <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: 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></view>
.flex-wrp{    height: 100px;    display:flex;    background-color: #FFFFFF;}.flex-item{    width: 100px;    height: 100px;}