在小程式開發中，我們需要考慮各種尺寸終端裝置上的適配。在傳統網頁開發，我們用的是盒模型，通過display:inline | block | inline-block、 position、float來實現布局，缺乏靈活性且有些適配效果難以實現。比如像下面這種常見的資訊列表，要求內容高度不確定下保持垂直居中：
這種情況下，我們更建議用flex布局。
在開始介紹flex之前，為了表述方便，我們約定以下術語：採用flex布局的元素，簡稱為「容器」，在**示例中以container表示容器的類名。容器內的元素簡稱為「專案」，在**示例中以item表示專案的類名。
flex的概念最早是在2023年被提出，目的是提供一種更靈活的布局模型，使容器能通過改變裡面專案的高寬、順序，來對可用空間實現最佳的填充，方便適配不同大小的內容區域。
設定容器的屬性有：
1.flex-direction:row（預設值） | row-reverse | column |column-reverse 屬性決定主軸的方向（即專案的排列方向）
2.flex-wrap:nowrap（預設值[不換行]） | wrap[換行] | wrap-reverse 預設情況下，專案都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
（1）nowrap（預設）：不換行。
（2）wrap：換行，第一行在上方。
（3）wrap-reverse：換行，第一行在下方。
3.justify-content:flex-start（預設值） | flex-end | center |space-between | space-around | space-evenly 定義了專案在主軸上的排列方式
4.align-items:stretch（預設值） | center | flex-end | baseline | flex-start 定義專案在交叉軸上的排列方式5.align-content:stretch（預設值） | flex-start | center |flex-end | space-between | space-around | space-evenly 定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
設定專案的屬性有：
1.order:0（預設值） | 定義專案的排列順序，陣列越小，越靠前，預設為0；
2.flex-shrink:1（預設值） | 定義專案的縮小比列，預設為1，即如果該空間不足，專案將縮小。如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。負值對該屬性無效
3.flex-grow:0（預設值） | 定義專案的放大比例，預設為0.即存在剩餘空間，也不放大。如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。4.flex-basis:auto（預設值） |
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。5.flex:none | auto | @flex-grow @flex-shrink @flex-basis 是flex-grow，flex-shrink，flex-basis的簡寫方式。值設定為none，等價於00 auto。值設定為auto，等價於1 1 auto。6.align-self:auto（預設值） | flex-start | flex-end |center | baseline| stretch
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。微信小程式開發 學習筆記 3 WXSS樣式
wxss weixin style sheets 是一套用於小程式的樣式語言，用於描述wxml的元件樣式，也就是視覺上的效果。wxss與web開發中的css類似。為了更適合小程式開發，wxss對css做了一些補充以及修改。其它樣式 其它樣式可以被專案公共樣式和頁面樣式引用。在小程式開發中，開發者不需...
微信小程式學習筆記
1 background image 只能用網 絡url 或者base64 本地圖 片要用image 標籤才行 2 事件綁 定value 是乙個字串，需要在對應的 page 中定義 同名的函式。不然當觸 發事件的時候會 報錯。3 bind事件綁 定不會阻止冒泡事件向上冒泡，catch事件綁 定可以阻...
微信小程式學習筆記
主要用於 編寫和效果預覽，還可以進行 真機除錯 2 雲開發控制台 wxml 對應html，提供很多常用的元件。wxss 對應css，基本沒差別，目前體會最深的是尺寸單位rpx替代畫素單位px，能很方便的適配各種解析度的手機。js 同js。json 同json。pages 乙個頁面對應乙個資料夾，乙個...