小程式開發不可或缺的Flex佈局模式

wxflex

微信小程式的Flex佈局demo－4種必備常用的Flex佈局模式

程式碼庫

github位址：github.com/icindy/wxflex

官方建議的Flex佈局

Flex的佈局相比傳統的float佈局來說，簡單、快速、方便。掌握flex佈局可以在製作微信小程式時減少wxss的程式碼，同時也符合微信小程式開發的文件要求

本程式碼中涉及四種Flex的佈局方式，分別使用了不同的flex的不同屬性。
建議看本文最後的學習參考進行相關屬性的學習

骰子佈局

#骰子佈局中主要強調幾個屬性的使用display#justify-content align-items align-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%;
}

串流佈局

###1N、瀑布流等效果的製作######

.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;
}

###### ############【相關推薦】######1. ###微信小程式完整原始碼下載#########2. ###追格微信小程式應用程式商店原始碼######

以上是小程式開發不可或缺的Flex佈局模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！