HTML里面有盒子，盒子里面會(huì)有內(nèi)容。那么
:20px表示四個(gè)方向一樣的
:10px 20px第一個(gè)值代表上下第二個(gè)值代表左右
:10px 20px 50px三個(gè)值比較少見微信小程序彈性盒子，第一個(gè)值代表上下，第二個(gè)代表左，第三個(gè)代表右
:10px 20px 30px 40px分別代表上右下左(順時(shí)針方向)
后面三個(gè)屬性:大小、顏色、樣式
彈性盒子
自動(dòng)分配距離，如寬度上平均分布。比較簡(jiǎn)單的對(duì)盒子進(jìn)行分布。
只需要開啟彈性盒子。
flex 布局是繼標(biāo)準(zhǔn)流布局、浮動(dòng)布局(float)、定位布局后的第四種布局方式。flex 布局在瀏覽器中存在一定的兼容性。小程序中，是完全兼容 flex 布局的，并且微 信官方也是推薦使用 flex 布局的。
彈性容器：包含著彈性項(xiàng)目的父元素。通過設(shè)置 屬性的值為 flex 或 -flex 來(lái)定義彈性容器。彈性項(xiàng)目(Flex item)：彈性容器的每個(gè)子元素都稱為彈性項(xiàng)目。彈性容器直接包含的文本將被包覆 成匿名彈性項(xiàng)目。也可以稱為子容器。軸(Axis)：每個(gè)彈性框布局包含兩個(gè)軸。彈性項(xiàng)目沿其依次排列的那根軸稱為主軸(main axis)。垂直于主軸的那根軸稱為側(cè)軸(cross axis)。方向()：可以通過 flex- 來(lái)確定主軸和側(cè)軸的方向。
屬性用法截圖
-
flex-start
起點(diǎn)對(duì)齊
flex-end
結(jié)束點(diǎn)對(duì)齊
居中對(duì)齊
space-
兩頭距離是中間距離一半
space-
沒有兩頭邊距
space-
兩頭邊距中間邊距相等
align-items
flex-start
垂直起點(diǎn)對(duì)齊
flex-end
垂直結(jié)束點(diǎn)對(duì)齊
垂直居中對(duì)齊
(不常用)
基線對(duì)齊
更換主軸和側(cè)軸方向
不常用
主軸默認(rèn)的方向是從左到右，側(cè)軸的方向默認(rèn)是從上到下，當(dāng)然也可以進(jìn)行修改。可以通過 進(jìn)行修改。
換行
不常用，warp有時(shí)會(huì)用到
默認(rèn)情況下，元素個(gè)數(shù)如果超過一定數(shù)量，那么在一行當(dāng)中就排列不下。此時(shí) flex 默認(rèn)的處理方式是壓縮元素，使其能在一行中排列下來(lái)。
可以通過 flex-wrap 來(lái)改變排列的方式。可以設(shè)置的屬性如下：
align-屬性
在排列中微信小程序彈性盒子，如果有多行，那么這個(gè)屬性是設(shè)置多行之間的排列方式。也就是想用的前提是多行。
元素（子容器）的相關(guān)屬性
上面的屬性都是在父元素上的，之一部分看子元素。
flex-basis
auto當(dāng)前元素存在尺寸就按照尺寸；
0 當(dāng)前元素不管有沒有尺寸，尺寸都不起作用
flex-grow
數(shù)值：當(dāng)前元素的顯示比例
設(shè)置元素是否需要擴(kuò)大的比例。默認(rèn)值為0，即如果存在剩余空間，也不放大。比如有以下代碼：
.outter{
display: flex;
width: 300px;
height: 300px;
flex-wrap: wrap;
background: pink;
}
.outter .inner{
background: gray;
width: 100px;
height: 100px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.outter .inner1{
flex-grow: 2;
}
.outter .inner2{
flex-grow: 1;
}flex-
1 空間不足時(shí)進(jìn)行縮放
0 不進(jìn)行縮放
flex屬性
flex-grow flex- flex-basis 三個(gè)屬性的簡(jiǎn)寫。假設(shè)以上三個(gè)屬性同樣取默認(rèn)值， 則 flex 的默認(rèn)值是 0，1 ，auto。