主要寫給自己看的
如果不懂彈性布局 請先看我的這篇 彈性盒模型詳解
align-content可能值含義如下（假設主軸為水平方向）：flex flexible box 彈性盒子flex-start：左對齊
flex-end：右對齊
center：居中對齊
space- between：兩端對齊
space-around：沿軸線均勻分布
display: flex;
flex-direction: row;決定盒子裡的內容是橫排還是豎排
view 寬度100% height 自適應
row: 橫排123 靠左
row-reverse:橫排321 靠右
column:垂直排123 靠上
column:垂直排321 靠下
flex-direction: row/column;決定x\y那個方向是主軸
row:x軸排列(左右富裕) align-items(一般為center) 控制上下 justify-content :flex-start 控制左右
column:y軸排列(上下富裕) align-items(一般為center) 控制左右 justify-content :flex-start 控制上下
align-items:flex-start; 向上靠攏
align-items:flex-end; 向下靠攏
justify-content:space-around; 左右留空，中間均勻分布
justify-content:space-between; 向左右靠攏，中間均勻分布
換行：flex-wrap: nowrap; 不換行
flex-wrap: wrap; 換行(產生間距可以減少設定的高度)
flex-flow:row-reverse wrap;讓彈性盒的元素以相反的順序顯示，且在必要的時候進行拆行：
.class:nth-of-type(2) 讓第二個元素的寬度為其他元素的三倍：
以下為子元素設定:
子元素排列順序:
.color1
.test text
wxml 12
34
微信小程式頁面布局
3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。二,flex布局的特點 1.任意方向的伸縮，向左，向右，向下，向上 2.在樣式層可以調換和重排順序 3.主軸和側軸方便配置 4.子元素的空間拉伸和填充 5.沿著容器對齊23 顯示效果 block改換成di...
微信小程式頁面布局
1.flex布局，是w3c在2009年提出的一種新的方案，可以簡便，完整，響應式的實現各種頁面布局。2.flex布局提供了元素在容器中的對齊，方向以及順序，甚至他們可以是動態的或者不確定的大小的。3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。二,fl...
微信小程式 flex彈性布局案例
使用flex彈性布局 有滾動條 頁面結構 wxml 個性推薦 歌單主播電台 排行榜私人fm 每日歌曲推薦 雲 新歌榜 推薦歌單 一生中最愛的人是誰？一生中最愛的人 一生中最愛的人 一生中最愛的人 一生中最愛的人是誰？一生中最愛的人 一生中最愛 譚詠麟 wxss index.wxss page con...