微信小程序開發教程：Flex布局

時間：2016-10-15 21:22:00

微信小程序頁麵布局方式采用的是Flex布局。
Flex布局，是W3c在2009年提出的一種新的方案，可以簡便，完整，響應式的實現各種頁麵布局。
Flex布局提供了元素在容器中的對齊，方向以及順序，甚至他們(men) 可以是動態的或者不確定的大小的。
Flex布局的主要特征是能夠調整其子元素在不同的屏幕大小中能夠用最適合的方法填充合適的空間。

Flex布局的特點:

任意方向的伸縮，向左，向右，向下，向上
在樣式層可以調換和重排順序
主軸和側(ce) 軸方便配置
子元素的空間拉伸和填充
沿著容器對齊

微信小程序實現了Flex布局,簡單介紹下Flex布局在微信小程序中的使用。

伸縮容器

設有display:flex或者display:block的元素就是一個(ge) flex container(伸縮容器)，裏麵的子元素稱為(wei) flex item(伸縮項目)，flex container中子元素都是使用Flex布局排版。

display:block 指定為(wei) 塊內(nei) 容器模式，總是使用新行開始顯示，微信小程序的視圖容器(view,scroll-view和swiper)默認都是dispaly:block。
display:flex:指定為(wei) 行內(nei) 容器模式，在一行內(nei) 顯示子元素，可以使用flex-wrap屬性指定其是否換行，flex-wrap有三個(ge) 值:nowrap(不換行),wrap(換行),wrap-reverse(換行第一行在下麵)
使用display:block(默認值)的代碼:

</view>

顯示效果:

改換成display:flex的顯示效果:

可以從(cong) 效果圖看到block和flex的區別，子元素view是在換行顯示(block)還是行內(nei) 顯示(flex)。

主軸和側軸

Flex布局的伸縮容器可以使用任何方向進行布局。
容器默認有兩(liang) 個(ge) 軸：主軸(main axis)和側(ce) 軸(cross axis)。
主軸的開始位置為(wei) 主軸起點(main start)，主軸的結束位置為(wei) 主軸終點(main end),而主軸的長度為(wei) 主軸長度(main size)。
同理側(ce) 軸的起點為(wei) 側(ce) 軸起點(cross start),結束位置為(wei) 側(ce) 軸終點(cross end),長度為(wei) 側(ce) 軸長度(cross size)。詳情見下圖:

注意，主軸並不是一定是從(cong) 左到右的，同理側(ce) 軸也不一定是從(cong) 上到下，主軸的方向使用flex-direction屬性控製,它有4個(ge) 可選值:

row :從(cong) 左到右的水平方向為(wei) 主軸
row-reverse：從(cong) 右到左的水平方向為(wei) 主軸
column:從(cong) 上到下的垂直方向為(wei) 主軸
column-reverse從(cong) 下到上的垂直方向為(wei) 主軸

如果水平方向為(wei) 主軸，那個(ge) 垂直方向就是側(ce) 軸，反之亦然。
四種主軸方向設置的效果圖:

圖中的實例展示了使用了不同的flex-direction值排列方向的區別。
實例代碼:

<view >

</view>

</view>

運行效果：

對齊方式

子元素有兩(liang) 種對齊方式：

justify-conent 定義(yi) 子元素在主軸上麵的對齊方式
align-items 定義(yi) 子元素在側(ce) 軸上對齊的方式

jstify-content有5個(ge) 可選的對齊方式:

flex-start 主軸起點對齊(默認值)
flex-end 主軸結束點對齊
center 在主軸中居中對齊
space-between 兩(liang) 端對齊，除了兩(liang) 端的子元素分別靠向兩(liang) 端的容器之外，其他子元素之間的間隔都相等
space-around 每個(ge) 子元素之間的距離相等，兩(liang) 端的子元素距離容器的距離也和其它子元素之間的距離相同。
justify-content的對齊方式和主軸的方向有關(guan) ，下圖以flex-direction為(wei) row，主軸方式是從(cong) 左到右,描述jstify-content5個(ge) 值的顯示效果: