微信小程序佈局

1：Flex佈局
Flex佈局如圖1所示

1.1 Flex容器屬性

1.2 Flex容器內元素屬性（）

align如果定義會覆寫掉容器屬性中的justify-content，align-items設置的屬性

1.1.1 容器屬性： flex-direction
在.container1增加如下代碼：表示設置flex佈局縱向排列元素(從左到右爲交叉軸，從上到下爲主軸)，如圖2所示。（row：flex佈局橫向排列元素—從左到右爲主軸，從上到下爲交叉軸）
flex-direction:column 【按列排】
flex-direction:row 【按行排】
1.1.2 容器屬性： flex-wrap
flex-wrap:nowrap
flex-wrap:wrap

1.1.3容器屬性： flex-flow
flex-flow: wrap row，編譯運行結果：如圖5所示，flex-flow相當於 flex-direction和flex-wrap兩個屬性的組合

1.1.4容器屬性：justify-content
在.container1增加如下代碼：編譯運行如圖6所示。表示在主軸上的對齊方式，由於上面代碼我們設置flex-flow: wrap row—相當於主軸爲從左到右，所以一行顯示不下的第8個元素在下一行居中顯示，而前七個子view，也在一行中居中顯示，左右兩側就有空白留邊
justify-content:center
justify-content:flex-end （主軸爲左到右情況下：右對齊）
justify-content:flex-start （主軸爲左到右情況下：左對齊）
justify-content:space-around—效果如圖8所示，每個子view左右都有留邊

justify-content:space-between—效果如圖9所示，每個子view左右都有留邊，但是首尾兩個view各自左右對齊不留邊

1.1.5容器屬性：align-items
上面已經很詳細講解主軸上的對齊方式，這裏關於這個交叉軸上的對齊方式同理很簡單，就不詳細展開了。

容器內元素的屬性
1.2.1 容器內元素屬性：flex-grow

layout.wxml中修改代碼如下：增加i3

3

layout.wxss中修改代碼如下：在item1中增加： flex-grow: 1，增加i3，表示在一行中如果有剩餘空間的話，i3之外的子view佔1份空間，而i3子view佔2份空間，編譯運行效果如圖10所示：可以看出i3view所佔據的空間比其餘3個子view大，但是沒有到2倍
.item1{
height:100rpx;
width:100rpx;
background-color:cyan;
border: 1px solid #fff;
flex-grow: 1
}

.i3{
flex-grow: 2
}

圖10

1.2.2容器內元素屬性：flex-shrink
layout.wxml再增加4個子view

layout.wxss中修改代碼如下：i3的flex-shrink爲0，其餘子view爲1，這表示當空間不足時所有子view都等比縮小，但是i3的view保持大小不變，編譯運行，效果如圖11所示
.item1{
height:100rpx;
width:100rpx;
background-color:cyan;
border: 1px solid #fff;
flex-shrink: 1
}

.i3{
flex-shrink: 0
}

圖11

1.2.3容器內元素屬性：flex-basis
layout.wxss中修改代碼如下：其他代碼保持不變不變，編譯運行，效果如圖12所示
.i3{
flex-shrink: 0;
flex-basis: 200rpx
}

圖12

1.2.4容器內元素屬性：flex
flex是grow，shink，basis幾個屬性的合併，layout.wxss中修改代碼如下：其他代碼保持不變不變，編譯運行，效果和圖12保持一樣
.i3{
flex:0 0 200rpx
}

1.2.5容器內元素屬性：order
layout.wxml中修改代碼如下：設置每個view的order屬性爲其顯示的順序，編譯運行，效果如圖13所示：

1

2

3

4

圖13 1.2.6容器內元素屬性：align-self 設置每個元素自身的對齊方式