這篇博客主要講微信小程序的佈局的基礎知識。以及微信小程序加入地圖之後會出現的一些問題（坑）。
微信小程序佈局之---Flex佈局
1.想要使用flex佈局的第一步：
display:block塊內容 使用新行開始顯示。
diaplay:flex行內容 在一行內顯示子元素。
默認都是display:block.
2.指定子元素的排列方向，第二步：
flex-direction:row 子元素從左到右的水平方向
flex-direction：row-reverse 子元素從右到左方向
flex-direction:column 從上到下
flex-direction:column-reverse 從下到上
上面就是子元素一般的排列方式。
3.對齊方式justify-content（主軸對齊方式）
（借圖說話）
justify-content:flex-start 主軸起點對齊（默認值）
justify-content:flex-end 主軸結束點對齊
justify-content:center 在主軸中居中對齊
justify-content:space-between 兩端對齊，兩端子容器分別靠近容器兩端，其他子元素間隔相等。
justify-content:space-around 每個子元素的距離相等，兩端子元素距容器距離=和其他子元素間的距離。
4.對齊方式align-items（側軸對齊方式）
(stretch)
align-items:stretch 填充整個容器
(flex-start)
align-items:flex-start 側軸的起點對齊
(flex-end)
align-items:flex-end 側軸的終點對齊
(center)
align-items:center 在側軸中居中對齊
(baseline)
align-items:baseline 以子元素的第一行文字對齊
以上便是關於微信小程序佈局的一些樣式介紹。接下來介紹在微信小程序中加入地圖，又會遇到什麼坑呢？
微信小程序之---加入地圖（這裏我使用的是高德地圖）
我在微信小程序中加入高德地圖。根據高德官方提供的方法來進行調用，地址：https://lbs.amap.com/api/wx/summary/
問題：1.在高德地圖中要彈出一個帶input的彈框，會出現彈框無法顯示的情況。（我建議大家一定要在真機上跑，因爲模擬器很多東西運行正常，到整機就歇菜，比如現在這個問題）
原因：地圖在微信小程序裏屬於最高級的圖層，不能被其他的所掩蓋。
但是微信給我們提供了一個cover-view這個標籤，這個標籤可以覆蓋原生組件上的文本視圖，它可以覆蓋map、video、canvas、camera。但它只支持嵌套cover-view、cover-image。
不能嵌套input。那麼我們怎麼實現 在地圖上顯示包含輸入框的彈框 這個需求呢？
微信官方是沒有就提供這個方法的，於是產生了如下雞肋繁瑣的方法，也是我現在唯一能想到的辦法。
解決：高德地圖爲小程序提供了靜態地圖的功能，也就是根據你的座標位置，縮放比例，給你生成一張靜態地圖。
一開始進入的時候，顯示地圖，隱藏彈框。在要show彈框的時候，就隱藏掉map，把靜態地圖調出來，並且顯示。這個時候，地圖在下方，彈框也正常顯示出來了。然後你關閉彈窗，隱藏掉靜態圖，顯示出地圖。（這樣就完成了）
我第一反應是，不可能吧，一個小小的彈窗要費這麼大的勁兒？開玩笑吧。
我查了很多資料，確實是微信沒有提供這種服務，到了9021年都還沒解決，實在讓老夫痛心！
給新手們一些建議：
1.最好不要用微信小程序自帶的wx.showToast和wx.showLoading，自己去寫一個提示類。
原因：顯示字符的限制。只能輸入極少長度的字來進行提示，有很大的限制。
以及顯示圖標的限制。提示的圖標不可更改（無論是正確錯誤都是一個√，會給用戶造成極大的誤解）
2.多去看微信給的api。
這是我在開發過程中遇到的一個問題的分享，希望能幫到大家，也鞏固自己的學習。謝謝。有誤請指正。