3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。
二,flex布局的特點:
1.任意方向的伸縮，向左，向右，向下，向上
2.在樣式層可以調換和重排順序
3.主軸和側軸方便配置
4.子元素的空間拉伸和填充
5.沿著容器對齊23
顯示效果:
block改換成display:flex的顯示效果:
可以從效果圖看到block和flex的區別，子元素view是在換行顯示(block)還是行內顯示(flex)。
主軸和側軸:
flex布局的伸縮容器可以使用任何方向進行布局。
容器預設有兩個軸：主軸(main axis)和側軸(cross axis)。
主軸的開始位置為主軸起點(main start)，主軸的結束位置為主軸終點(main end),而主軸的長度為主軸長度(main size)。
同理側軸的起點為側軸起點(cross start),結束位置為側軸終點(cross end),長度為側軸長度(cross size)。
詳情見下圖:
注意，主軸並不是一定是從左到右的，同理側軸也不一定是從上到下，主軸的方向使用flex-direction屬性控制,它有4個可選值:
1.row :從左到右的水平方向為主軸
2.row-reverse：從右到左的水平方向為主軸
3.column:從上到下的垂直方向為主軸
4.column-reverse從下到上的垂直方向為主軸
如果水平方向為主軸，那個垂直方向就是側軸，反之亦然。
四種主軸方向設定的效果圖:
圖中的例項展示了使用了不同的flex-direction值排列方向的區別。
例項**:12
3c1c2c3
執行效果：
對齊方式
子元素有兩種對齊方式：
justify-conent 定義子元素在主軸上面的對齊方式
align-items 定義子元素在側軸上對齊的方式
justify-content有5個可選的對齊方式:
1.flex-start 主軸起點對齊(預設值)
2.flex-end 主軸結束點對齊
3.center 在主軸中居中對齊
4.space-between 兩端對齊，除了兩端的子元素分別靠向兩端的容器之外，其他子元素之間的間隔都相等
5.space-around 每個子元素之間的距離相等，兩端的子元素距離容器的距離也和其它子元素之間的距離相同。
6.justify-content的對齊方式和主軸的方向有關，下圖以flex-direction為row，主軸方式是從左到右,描述jstify-content5個值的顯示效果:
align-items表示側軸上的對齊方式:
1.stretch 填充整個容器(預設值)
2.flex-start 側軸的起點對齊
3.flex-end 側軸的終點對齊
4.center 在側軸中居中對齊
5.baseline 以子元素的第一行文字對齊
align-tiems設定的對齊方式，和側軸的方向有關，下圖以flex-direction為row,側軸方向是從上到下,描述align-items的5個值顯示效果:
微信小程式頁面布局
1.flex布局，是w3c在2009年提出的一種新的方案，可以簡便，完整，響應式的實現各種頁面布局。2.flex布局提供了元素在容器中的對齊，方向以及順序，甚至他們可以是動態的或者不確定的大小的。3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。二,fl...
微信小程式頁面彈性布局
主要寫給自己看的 如果不懂彈性布局 請先看我的這篇 彈性盒模型詳解 align content可能值含義如下 假設主軸為水平方向 flex start 左對齊 flex end 右對齊 center 居中對齊 space between 兩端對齊 space around 沿軸線均勻分布flex f...
小程式跳轉樣式布局錯亂 微信小程式頁面布局問題
頭部和尾部固定，中間內容不固定，實現的效果為當頁面第二部分內容較少時三個部分剛好佔滿螢幕，當內容較多時第二步分高度自適應，第三部分緊跟第二部分 wxm檔案中的高度在讀取到的資料較多時是如何判斷的呢？index.wxml 第一部分內容，高度是固定的rpx 第二部分內容，內容較少時占用剩下螢幕填充整個高...