wxflex
微信小程式的Flex佈局demo－4種必備常用的Flex佈局模式
github位址：github.com/icindy/wxflex
Flex的佈局相比傳統的float佈局來說，簡單、快速、方便。掌握flex佈局可以在製作微信小程式時減少wxss的程式碼，同時也符合微信小程式開發的文件要求
本程式碼中涉及四種Flex的佈局方式，分別使用了不同的flex的不同屬性。
建議看本文最後的學習參考進行相關屬性的學習
#骰子佈局中主要強調幾個屬性的使用
display#justify-contentalign-itemsalign-self#等
.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;
}
主要依賴flex屬性
.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;
}以上是小程式開發不可或缺的Flex佈局模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
