我們接著上一章創(chuàng)建的WXView那個頁面進行開發(fā)，今天我們開始學習谆棺，小程序的view控件栽燕，其實說是控件罕袋，我認為它更傾向于html里面的div標簽，可以就把它理解為是div的一個變種碍岔。

先看demo的效果圖：

效果圖

我們就在.wxml文件里定義幾個view浴讯。

xml文件

我們怎么把view橫向排列呢，我們就要在樣式文件進行配置了

wxss文件

? ? ?大家看到我標紅的兩行代碼蔼啦，這兩行代碼讓我定義的view1榆纽，2，3捏肢，4橫向排列了奈籽，這就是彈性布局及flex布局。我們今天就來理一理鸵赫，什么是flex布局衣屏。flex布局到底該怎么布。

什么是flex布局

? ? Flex是Flexible Box的縮寫辩棒，意為”彈性布局”狼忱，用來為盒狀模型提供最大的靈活性。

? ? ?采用Flex布局的元素一睁，稱為Flex容器（flex container）钻弄，簡稱”容器”。它的所有子元素自動成為容器成員者吁，稱為Flex項目（flex item）斧蜕，簡稱”項目”。下圖標注了flex容器的架構(gòu)圖砚偶。

flex架構(gòu)圖

我們把flex理解為一個容器批销，箭頭1所指的背景顏色為黃色的整個框，我們就認為是一個大的容器染坯，箭頭2 所指的藍色的地方均芽，可以認為是放在容器中的一個子元素(子元素叫做項目)。如圖就可以理解為单鹿，當前Flex容器（flex container）中包含了3個子項目（flex item）掀宋。

另外，容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）仲锄。主軸的開始位置（與邊框的交叉點）叫做main start劲妙，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start儒喊，結(jié)束位置叫做cross end镣奋。

項目默認沿主軸排列。單個項目占據(jù)的主軸空間叫做main size怀愧，占據(jù)的交叉軸空間叫做cross size侨颈。

flex容器的屬性

? ? 第一個屬性? flex-direction

? ? flex-direction屬性決定主軸的方向（即子項目的排列方向）余赢。

flex-direction:row |row-reverse|column|column-reverse;

flex-direction:row時候 demo的效果圖為最上面的效果圖；（row 表示該容器中的子元素即flex-item元素 從左到右依次排列）

flex-direction:column 時候如下圖：(column:表示該容器中的子元素即flex-item元素 從上到下依次排列)

wxss文件

效果圖

當然你也可以測試flex-direction:row-reverse|column-reverse（row-reverse表示該容器中的子元素即flex-item元素 從右到左依次排列）（column-reverse 表示該容器中的子元素即flex-item元素 從下到上依次排列）如有疑問flex-diction描述

第二個屬性? flex-wrap?

? ? 默認情況下哈垢，子元素都排在一條線（又稱"軸線"）上妻柒。flex-wrap屬性定義，如果一條軸線排不下耘分，如何換行举塔。我們來演示一下這種情況。

wxss文件

如圖：我把容器設(shè)置為橫向排列求泰，子元素view1的寬度設(shè)置為容器的100%啤贩，view2，3拜秧，4分別為10%痹屹，容器的flex-wrap：nowrap 看看效果：

效果圖

flex-wrap：nowrap 表示即使一行排不下，也不換行枉氮。（我在設(shè)置是讓view1 的寬度占了整個屏幕的100%志衍，按道理來說view2，3聊替，4應(yīng)該被擠到下一行楼肪，然而并沒有）

同理 當flex-wrap：wrap時：

效果圖

flex-wrap：wrap 表示一行排不下，就換行惹悄。

flex-wrap：wrap-reverse 換行春叫，第一行在下方。（自己嘗試下）

第三個屬性? justify-content?

justify-content屬性定義了項目在主軸上的對齊方式泣港。（可以理解為相對于X軸的位置）

justify-content:flex-start | flex-end | center | space-between | space-around;

默認屬性 是flex-start效果圖是最上面的效果圖暂殖。即容器中的子元素左對齊

?是flex-end表示容器中的子元素右對齊。效果圖如下圖：

wxcss文件

end效果圖

center表示容器中子元素居中当纱。

center效果圖

space-between表示容器中子元素兩端對齊呛每，子元素之間的間隔相等

between效果圖

space-around 表示容器中每個子元素的兩端相等，子元素之間的間隔比子元素與邊框的間隔大一倍坡氯。

around效果圖

第四個屬性? align-items

? ? ? ? ?該屬性定義項目在交叉軸上如何對齊(可以理解為相對于y軸的位置)

align-items:flex-start | flex-end | center | baseline | stretch;

flex-start：交叉軸的起點對齊晨横。

start

flex-end:交叉軸的終點對齊。

flex-end

center：居中

center

baseline: 項目的第一行文字的基線對齊箫柳。(自己試一下)

stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto手形，將占滿整個容器的高度。(自己試一下)

第五個屬性 align-content?

屬性定義了多根軸線的對齊方式悯恍。如果項目只有一根軸線库糠，該屬性不起作用

? 我修改了wxss文件。把容器設(shè)置為可換行的

wuss

效果圖：

效果圖

align-content:flex-start | flex-end | center | space-between | space-around | stretch;

flex-start：與交叉軸的起點對齊 (理解為與Y軸最上邊對齊) 效果圖如上圖坪稽。

flex-end：與交叉軸的終點對齊 (理解為與Y軸最底邊對齊) 效果圖如下圖：

end效果圖

center：與交叉軸的中點對齊 (Y軸居中) 效果圖就不掩飾了曼玩。

space-between：與交叉軸兩端對齊鳞骤，軸線之間的間隔平均分布窒百。

space-around：每根軸線兩側(cè)的間隔都相等黍判。所以，軸線之間的間隔比軸線與邊框的間隔大一倍篙梢。

stretch（默認值）：軸線占滿整個交叉軸顷帖。

至此，flex容器的屬性就介紹完了渤滞，接下來一章贬墩，是介紹flex容器的子元素flex-item 的屬性。

附上demo地址：demo地址