微信小程式 flex彈性布局案例

使用flex彈性布局

有滾動條

頁面結構

wxml

個性推薦

歌單主播電台
排行榜私人fm
每日歌曲推薦
雲**新歌榜
推薦歌單
一生中最愛的人是誰？
一生中最愛的人
一生中最愛的人
一生中最愛的人
一生中最愛的人是誰？
一生中最愛的人
一生中最愛
譚詠麟 

/**index.wxss**/

page 
.container 
.top 
.top .item 
.top .item.active 
.content 
.slide image 
.portals 
.portals .item 
.portals .item image 
.portals .item text 
.list .title 
.list .inner 
.list .inner .item
.inner .item image 
.inner .item text 
.bottom 
.bottom .poster image 
.info 
.info .title 
.controls image 

微信小程式 flex布局

flex布局的特點 伸縮容器 使用display block 預設值 的 flex row style display block flex view item 1 view flex view item 2 view flex view item 3 view view 可以從效果圖看到block...

微信小程式頁面彈性布局

主要寫給自己看的 如果不懂彈性布局 請先看我的這篇 彈性盒模型詳解 align content可能值含義如下 假設主軸為水平方向 flex start 左對齊 flex end 右對齊 center 居中對齊 space between 兩端對齊 space around 沿軸線均勻分布flex f...

微信小程式之flex布局

flex布局 flex布局的特點 設有display flex或者display block的元素就是乙個flex container 伸縮容器 裡面的子元素稱為flex item 伸縮專案 flex container中子元素都是使用flex布局排版。display flex 指定為行內容器模式，...