小程序模板網(wǎng)

小程序 居中布局 解決方案

發(fā)布時間:2018-06-09 14:55 所屬欄目:小程序開發(fā)教程

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

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

/* 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(水平軸線,默認(rèn)) column(垂直軸線) //這里講的是比較常用的布局 
(軸線舉例:父級元素使用flex布局,默認(rèn)布局下塊級元素是會換行的,但設(shè)置了flex布局后默認(rèn)就都水平排列了) 
justify-content: flex-start(居于軸線的開頭) center(居于軸線的中間) flex-end(居于軸線的末端) space-around(將子元素按比例排列在軸線上) space-between(將子元素排列在軸線兩端) 
align-items: 同justify-content 
flex-wrap(規(guī)定子元素溢出處理): nowrap(不換行) wrap(順序換行) wrap-reverse(逆序換行)

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


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24524.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢