align-content屬性在排列中，如果有多行，那么這個屬性是設置多行之間的排列方式。可以通過 align-content 屬性來確定排列的方式。可以設置以下值。

flex-start ：從上往下排列。示例代碼如下：

.outter {display: flex;flex - wrap: wrap;align - content: flex - start;width: 300px;height: 300px;background: pink; }

2 flex-end ：末尾段對齊。效果圖如下：

2. center ：中點對齊。效果圖如下：

4 space-between ：與交叉軸兩端對齊，軸線之間的間隔平均分布。效果圖如下：

3. space-around ：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。效果圖如下：

4. stretch ：默認方式，如果沒有給元素設置高度，那么會占滿整個交叉軸。

.outter.inner {background: gray;width: 100px;/* height: 100px; */border: 1px solid#ccc;box - sizing: border - box; }

效果圖如下：

元素（子容器）的相關屬性
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，即如果存在剩余空間，也不放大。比如有以下代碼：

<view class='outter'><view class='inner inner1'>1</view> <view class='inner inner2'>2</view> </view>

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，那么他的寬度將會保持為設置的寬度，如果寬度沒有設置，那么將根據他的子元素來保留寬度。假如代碼為：

<view class='outter'><view class='inner inner1'>1</view> <view class='inner inner2'>2</view> </view>

wxss代碼為：

.outter.inner1 {flex - grow: 0; }.outter.inner2 {flex - grow: 1; }

效果圖為：

如果把 inner1 的 width 刪掉，那么效果圖為：

flex-shrink屬性：
定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。比如有以下代碼：

<view class='outter'><view class='inner inner1'>1</view><view class='inner inner2'>2</view><view class='inner'>3</view><view class='inner'>4</view> </view>

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 的取值，有以下幾種方式：

auto ：等價于 1 1 auto 。也就是允許增長，允許縮小，寬度為自動。

none ：等價于 0 0 auto 。也就是不允許增長，不允許縮小，寬度為自動。

非負數字：這個數字表示的是 flex-grow 的值， flex-shrink 為1，表示允許縮小， flex-basis 為0%。可以認為他就是把剩余的空間進行填充。比如以下代碼是等價的：

.item {flex: 1; }.item {flex - grow: 1;flex - shrink: 1;flex - basis: 0 % ; }

0 ：對應的三個值分別為 0 1 0% 。比如以下代碼是等價的：

.item {flex: 0; }.item {flex - grow: 0;flex - shrink: 1;flex - basis: 0 % ; }

長度或者百分比：則這個值視為 flex-basis 的值，而 flex-grow 為1， flex-shrink 為1。比如以下代碼是等價的：

.item - 1 {flex: 0 % ; }.item - 1 {flex - grow: 1;flex - shrink: 1;flex - basis: 0 % ; }.item - 2 {flex: 24px; }.item - 2 {flex - grow: 1;flex - shrink: 1;flex - basis: 24px; }

兩個非負數字：分別視為 flex-grow 和 flex-shrink 的值， flex-basis 取 0% ，如下是等同的：

.item {flex: 2 3; }.item {flex - grow: 2;flex - shrink: 3;flex - basis: 0 % ; }

一個非負數字和一個長度或百分比：則分別視為 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 11 32px; }.item {flex - grow: 11;flex - shrink: 1;flex - basis: 32px; }

更多關于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

總結

以上是生活随笔為你收集整理的微信小程序学习笔记（五）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。