溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下小程序中如何實現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;
}以上是“小程序中如何實現view視圖容器”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
