溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

小程序中怎么實(shí)現(xiàn)view視圖容器

發(fā)布時(shí)間：2022-04-08 10:41:50 來(lái)源：億速云 閱讀：169 作者：iii 欄目：編程語(yǔ)言

這篇文章主要講解了“小程序中怎么實(shí)現(xiàn)view視圖容器”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“小程序中怎么實(shí)現(xiàn)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;
}

小程序中怎么實(shí)現(xiàn)view視圖容器

圖片

// 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;
}

小程序中怎么實(shí)現(xiàn)view視圖容器

圖片

// 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;
}

小程序中怎么實(shí)現(xiàn)view視圖容器

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;
}

小程序中怎么實(shí)現(xiàn)view視圖容器

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;
}

小程序中怎么實(shí)現(xiàn)view視圖容器

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;
}

小程序中怎么實(shí)現(xiàn)view視圖容器

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;
}

小程序中怎么實(shí)現(xiàn)view視圖容器

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;
}

小程序中怎么實(shí)現(xiàn)view視圖容器

view

屬性

排列方式(flex-direction)描述
row橫向排列
column縱向排列
項(xiàng)目?jī)?nèi)容對(duì)齊（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;
}

感謝各位的閱讀，以上就是“小程序中怎么實(shí)現(xiàn)view視圖容器”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)小程序中怎么實(shí)現(xiàn)view視圖容器這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手