微信小程序開發必備必看經常使用的Flex佈局模式－wxflex

首發地址:http://weappdev.com/t/flex-wx...

wxflex

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

代碼庫

github地址：https://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%;
}

流式佈局

九宮格、瀑布流等效果的製做

.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 學習參考

• 本代碼參考阮一峯的網絡日誌:Flex 佈局教程：實例篇編寫

• 語法學習 阮一峯的網絡日誌:Flex 佈局教程：語法篇