本文介绍了小程序开发基础之view视图容器，分享给大家，具体如下：

视图容器

// wxml<view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp_one"> <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>// wxss.flex-wrp_one{ display: flex; flex-direction: row;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

图片

// wxml<view class="section"> <view class="section__title">flex-direction: column</view> <view class="flex-wrp_two"> <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>// wxss.flex-wrp_two{ display: flex; flex-direction: column;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

图片

// wxml<view class="section"> <view class="section__title">justify-content: flex-start</view> <view class="flex-wrp_three"> <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>// wxss .flex-wrp_three{ display: flex; justify-content: flex-start;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

view

// wxml<view class="section"> <view class="section__title">justify-content: flex-end</view> <view class="flex-wrp_four"> <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>// wxss.flex-wrp_four{ display: flex; justify-content: flex-end;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

view

// wxml<view class="section"> <view class="section__title">justify-content: center</view> <view class="flex-wrp_five"> <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>// wxss.flex-wrp_five{ display: flex; justify-content: center;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

view

// wxml<view class="section"> <view class="section__title">justify-content: space-between</view> <view class="flex-wrp_six"> <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>// wxss.flex-wrp_six{ display: flex; justify-content: space-between;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

view

// wxml<view class="section"> <view class="section__title">justify-content: space-around</view> <view class="flex-wrp_seven"> <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>// wxss.flex-wrp_seven{ display: flex; justify-content: space-around;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

view

// wxml<view class="section"> <view class="section__title">justify-content: space-evenly</view> <view class="flex-wrp_eight"> <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>// wxss.flex-wrp_eight{ display: flex; justify-content: space-evenly;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

view

属性

排列方式(flex-direction) 描述 row 横向排列 column 纵向排列

项目内容对齐（justify-content） 描述 flex-start 向行头紧挨 flex-end 向行尾紧挨 center 居中紧挨 space-between 平均分布 space-around 平均分布 ,两边留有一半间隔 space-evenly 两边间隔与中间相同

源码

// wxml<view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp_one"> <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_two"> <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">justify-content: flex-start</view> <view class="flex-wrp_three"> <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">justify-content: flex-end</view> <view class="flex-wrp_four"> <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">justify-content: center</view> <view class="flex-wrp_five"> <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">justify-content: space-between</view> <view class="flex-wrp_six"> <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">justify-content: space-around</view> <view class="flex-wrp_seven"> <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">justify-content: space-evenly</view> <view class="flex-wrp_eight"> <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>// wxss.flex-wrp_one{ display: flex; flex-direction: row;}.flex-wrp_two{ display: flex; flex-direction: column;}.flex-wrp_three{ display: flex; justify-content: flex-start;}.flex-wrp_four{ display: flex; justify-content: flex-end;}.flex-wrp_five{ display: flex; justify-content: center;}.flex-wrp_six{ display: flex; justify-content: space-between;}.flex-wrp_seven{ display: flex; justify-content: space-around;}.flex-wrp_eight{ display: flex; justify-content: space-evenly;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

开源github分享

Wechat_small_program_Share

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。