微信小程序学习笔记（五）
align-content屬性在排列中，如果有多行，那么這個屬性是設置多行之間的排列方式。可以通過 align-content 屬性來確定排列的方式。可以設置以下值。
2 flex-end ：末尾段對齊。效果圖如下：
2. center ：中點對齊。效果圖如下：
4 space-between ：與交叉軸兩端對齊，軸線之間的間隔平均分布。效果圖如下：
3. space-around ：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。效果圖如下：
4. stretch ：默認方式，如果沒有給元素設置高度，那么會占滿整個交叉軸。
效果圖如下：
元素（子容器）的相關屬性
flex-basis：
定義了在分配多余空間之前，項目占據的主軸空間，瀏覽器根據這個屬性，計算主軸是否有多余空間。
.item {
flex-basis: | auto;
}
默認值：auto，即項目本來的大小, 這時候 item 的寬高取決于 width 或 height 的值。
當主軸為水平方向的時候，當設置了 flex-basis，項目的寬度設置值會失效，flex-basis 需要跟 flex-grow 和 flexshrink 配合使用才能發揮效果。
當 flex-basis 值為 0 時，是把該項目視為零尺寸的，故即使聲明該尺寸為 140px，也并沒有什么用。當 flex-basis 值為 auto 時，則跟根據尺寸的設定值(假如為 100px)，則這 100px 不會納入剩余空間。 flex-grow：
設置元素是否需要擴大的比例。默認值為0，即如果存在剩余空間，也不放大。比如有以下代碼：
wxss代碼為：
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; }效果圖為：
因為兩個元素分別占了2份，1份，所以第一個元素是占據了整個容器寬度的2/3，第二個元素占據了整個容器寬度的1/3。
另外，如果設置 flex-grow 為0，那么他的寬度將會保持為設置的寬度，如果寬度沒有設置，那么將根據他的子元素來保留寬度。假如代碼為：
wxss代碼為：
.outter.inner1 {flex - grow: 0; }.outter.inner2 {flex - grow: 1; }效果圖為：
如果把 inner1 的 width 刪掉，那么效果圖為：
flex-shrink屬性：
定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。比如有以下代碼：
wxss的代碼如下：
.outter {display: flex;width: 300px;height: 300px;background: pink; }.outter.inner {background: gray;width: 100px;height: 100px;border: 1px solid#ccc;box - sizing: border - box; }.outter.inner2 {flex - shrink: 0; }效果圖為：
因為給 inner2 設置了 flex-shrink 為0，所以即使在空間不夠的情況下，他也不會被壓縮。
flex屬性：
flex屬性是 flex-grow flex-shrink flex-basis 三個屬性的簡寫。假設以上三個屬性同樣取默認值，則 flex 的默認值
是 0 1 auto 。
關于 flex 的取值，有以下幾種方式：
更多關于flex布局請參考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout
https://zhuanlan.zhihu.com/p/25303493
App生命周期
請參考：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html
總結
以上是生活随笔為你收集整理的微信小程序学习笔记（五）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 联合国儿童基金会怎么查看我的月捐
- 下一篇： 三十七、细说Scrapy中的settin