小程序UI設計（7）-布局分解-左-上下結構

FlexBox布局中的變幻方式很多，我們繼續了解一個左-上下結構的布局分解

 
左邊結構樹中WViewRow下面有兩個WViewColumn。WViewRow是橫向排列，WViewColumn是縱向排列。第一個WViewColumn中放一個圖片，第二個放兩張圖片。如下圖展開的結構樹。
 
下面針對第二個WViewColumn中有兩個圖片的FlexBox進行分解講解。
 
flex-direction=column說明內部組件主軸x是從上而下。
flex-wrap在本工具中對於column類型的不起作用。此處請注意，由於使用中column這種方式是旋轉了坐標系，所以實際設計時也容易小迷糊。建議大家盡量避免使用column。
justify-content=space-between決定了兩個圖片間隔和在WViewColumn中的位置。這個屬性決定第一個元素對齊頂端，最后一個元素對齊底部，中間有間隔。如果有5個圖片的話，第一個和第五個會緊靠上下。每個圖片的間隔是view的高度減去5個圖片高度和再除以4。數學不好的同學可以實際操作一下，在一個WViewColumn中拖入多個圖片，然后變幻justify-content屬性看看效果。
align-items=flex-start決定了在副軸y的排列方式是從原點出發。由於此view是column旋轉了坐標系，此處可能理解有點小迷糊，我在這里語言也不好描述。大家可以實際拖入組件，變幻屬性看看實際效果。
align-content屬性暫不多解釋，在下個帖子中詳細解釋一下。此例子中不影響布局。