|
導(dǎo)讀微信小程序,簡(jiǎn)稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一... 微信小程序,簡(jiǎn)稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一項(xiàng)門檻非常高的創(chuàng)新,經(jīng)過將近兩年的發(fā)展,已經(jīng)構(gòu)造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。 wxflex微信小程序的Flex布局demo-4種必備常用的Flex布局模式 代碼庫(kù)github地址:github.com/icindy/wxflex 官方建議的Flex布局
本代碼中涉及到四種Flex的布局方式,分別使用了不同的flex的不同屬性。 骰子布局
.first-face {
display: flex;
justify-content: center;
align-items: center;
}
.second-face {
display: flex;
justify-content: space-between;
}
.second-pip-2 {
align-self: flex-end;
}
網(wǎng)格布局
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
}
百分比布局.Grid {
display: flex;
}
.cell-u-full {
flex: 0 0 100%;
}
流式布局
.parent {
width: 100%;
background-color: black;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.child {
box-sizing: border-box;
background-color: white;
flex: 0 0 25%;
height: 50px;
border: 1px solid red;
}
【相關(guān)推薦】 1. 微信小程序完整源碼下載 以上就是小程序開發(fā)不可或缺的Flex布局模式的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章! 小程序是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或者搜一下即可打開應(yīng)用。 |
溫馨提示:喜歡本站的話,請(qǐng)收藏一下本站!