您好,登錄后才能下訂單哦!
這篇文章主要講解了“微信小程序View:flex布局的方法”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“微信小程序View:flex布局的方法”吧!
微信小程序 View 支持兩種布局方式:Block 和 Flex,所有 View 默認都是 block
要使用 flex 布局的話需要顯式的聲明:
display:flex;
下面就來介紹下微信小程序的 Flex 布局
先做一個簡單的 demo
<view class="main"><view class="item item1">1</view><view class="item item2">2</view><view class="item item3">3</view> </view>
加上背景色能看的更清楚些
.main { width: 100%; background-color: antiquewhite; } .item { height: 100rpx; width: 100rpx; } .item1 { background-color: red; } .item2 { background-color: dodgerblue; } .item3 { background-color: greenyellow; }
然后大概是這個樣子的:
snip_20170213230726
然后我們先都加上display: flex
然后我們先都加上 display: flex
好使用 flex 布局,主意,貌似 view 不會自動繼承,需要在每個想使用的 view 里都加上。
首先是橫向布局和豎向布局,要設置屬性 flex-direction ,它有4個可選值:
row:從左到右的水平方向為主軸
row-reverse:從右到左的水平方向為主軸
column:從上到下的垂直方向為主軸
column-reverse:從下到上的垂直方向為主軸
然后我們要設置元素在橫向上的布局方向,需要設置 justify-content 屬性,它有5個值可選:
flex-start:主軸起點對齊(默認值)
flex-end:主軸結束點對齊
center:在主軸中居中對齊
space-between:兩端對齊,除了兩端的子元素分別靠向兩端的容器之外,其他子元素之間的間隔都相等
space-around:每個子元素之間的距離相等,兩端的子元素距離容器的距離也和其它子元素之間的距離相同
然后我們要設置元素在縱向上的布局方向,需要設置 align-items 屬性,它有5個值可選:
stretch 填充整個容器(默認值)
flex-start 側軸的起點對齊 (這里我們手動設置下子 view 的高度,來看的明顯一些)
flex-end 側軸的終點對齊
center 在側軸中居中對齊
baseline 以子元素的第一行文字對齊
子 View 還有個屬性 align-self,可以覆蓋父元素的 align-items 屬性,它有6個值可選:auto | flex-start | flex-end | center | baseline | stretch (auto 為繼承父元素 align-items 屬性,其他和 align-items 一致)
比如上面最后一個 baseline 的例子,我們把 item3 設置 align-self:flex-end;
此外還有 flex-wrap 屬性,用于控制子 View 是否換行,有3個值可選:
nowrap:不換行(默認)
wrap:換行
wrap-reverse:換行,第一行在最下面
還有子 View 有個 order 屬性,可以控制子元素的排列順序,默認為0。
比如還是上面那個例子,我們把 item3 設置 order:-1; 可以把 item3 排在前面
flex 常用布局就這些。
感謝各位的閱讀,以上就是“微信小程序View:flex布局的方法”的內容了,經過本文的學習后,相信大家對微信小程序View:flex布局的方法這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。