小程序的居中布局,你可以這樣做


 

 

前段時間小程序上線后就棄坑了,回到網頁開發去了,最近又有新項目,再次入坑,難免需要一些demo來重新熟悉,在這個過程中,發現demo中很少有人使用flex布局,今天給大伙稍微講一下這個布局。 
flex布局有啥用呢,最大的作用便是快速實現你所需要的布局(水平居中、垂直居中、左右對齊等) 
flex布局的使用非常簡單,在這我將幾個常用的場景,其他更深入的可以去查資料了解(我才不會說是因為我懶)

首先是對布局容器設置display:flex; 
然后你就可以盡情利用兩個屬性(justify-content(水平方向)和align-items(垂直方向))進行放縱了 
例如眾所周知最蛋疼的垂直居中

/* wxml */
<view class="classname">
    <text>測試用小玩意兒</text>
</view>
/* wxss */
view{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

將align-items改成justify-content

/* wxml */
<view class="classname">
<text>測試用小玩意兒</text>
</view>
/* wxss */
view{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}

兩個屬性一起來

 

 常用場景不止居中布局,還有很多,但一講起來篇幅難免太長,這里用文字帶過,不懂可以留言問我,或者度娘/Google(推薦看阮一峰的教程)

flex-direction(改變軸線方向): row(水平軸線,默認) column(垂直軸線) //這里講的是比較常用的布局 
(軸線舉例:父級元素使用flex布局,默認布局下塊級元素是會換行的,但設置了flex布局后默認就都水平排列了) 
justify-content: flex-start(居於軸線的開頭) center(居於軸線的中間) flex-end(居於軸線的末端) space-around(將子元素按比例排列在軸線上) space-between(將子元素排列在軸線兩端) 
align-items: 同justify-content 
flex-wrap(規定子元素溢出處理): nowrap(不換行) wrap(順序換行) wrap-reverse(逆序換行)

flex-direction(改變軸線方向): row(水平軸線,默認) column(垂直軸線) //這里講的是比較常用的布局 
(軸線舉例:父級元素使用flex布局,默認布局下塊級元素是會換行的,但設置了flex布局后默認就都水平排列了) 
justify-content: flex-start(居於軸線的開頭) center(居於軸線的中間) flex-end(居於軸線的末端) space-around(將子元素按比例排列在軸線上) space-between(將子元素排列在軸線兩端) 
align-items: 同justify-content 
flex-wrap(規定子元素溢出處理): nowrap(不換行) wrap(順序換行) wrap-reverse(逆序換行)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM