設(shè)置在主軸上的排列方式：
默認(rèn)情況下，主軸的方向是從左到右。在主軸方向上，可以通過(guò) justify-content 屬性來(lái)設(shè)置他們的排列方式。排列方式有以下幾種：

flex-start ：項(xiàng)目靠近父盒子的左側(cè)。默認(rèn)采用的就是這種排列方式。示例圖如下：

2 flex-end ：項(xiàng)目靠近父盒子的右側(cè)。

2. center ：所有項(xiàng)目會(huì)挨在一起在父盒子的中間位置。

3. space-around ：項(xiàng)目沿主軸均勻分布，位于首尾兩端的子容器到父容器的距離是子容器間距的一半。

4. space-between ：項(xiàng)目沿主軸均勻分布，位于首尾兩端的子容器與父容器緊緊挨著。

5. space-evenly ：項(xiàng)目在主軸上均勻分布，收尾兩端的自容器到父容器的距離跟自容器間的間距是一樣的。

設(shè)置在側(cè)軸上的排列方式：
默認(rèn)情況下，側(cè)軸的方向是從上到下。在側(cè)軸方向上，可以通過(guò) align-items 屬性來(lái)設(shè)置他們的排列方式。排列方式有以下幾種：
6. flex-start ：起始端對(duì)齊。默認(rèn)就是這種對(duì)齊方式。

7. flex-end ：末尾段對(duì)齊。

center ：中間對(duì)齊。

8. stretch ：如果項(xiàng)目沒(méi)有設(shè)置高度。那么子容器沿交叉軸方向的尺寸拉伸至與父容器一致。比如我們將 .inner 的高度屬性去掉，代碼如下：

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

效果圖為：

9. baseline ：基線對(duì)齊，這里的 baseline 默認(rèn)是指首行文字，所有子容器向基線對(duì)齊，交叉軸起點(diǎn)到元素基線距離最大的子容器將會(huì)與交叉軸起始端相切以確定基線。比如我們把代碼改成如下：

<view class='outter'><view class='inner'><view style='margin-top:10px;background:#eee;'>hello</view></view><view class='inner'>2</view> </view>

然后 wxss 文件為：

.outter{ display: flex; align-items: baseline; width: 300px; height: 200px; background: pink; } .outter .inner{...}

那么效果圖為：

更換主軸和側(cè)軸方向
主軸默認(rèn)的方向是從左到右，側(cè)軸的方向默認(rèn)是從上到下，當(dāng)然也可以進(jìn)行修改。可以通過(guò) flex-direction 進(jìn)行修改。可以修改的參數(shù)為以下：
11. row ：默認(rèn)屬性。從左到右。

12. row-reverse ：從右到左。

column ：從上到下。

column-reverse ：從下到上。

換行
默認(rèn)情況下，元素個(gè)數(shù)如果超過(guò)一定數(shù)量，那么在一行當(dāng)中就排列不下。此時(shí) flex 默認(rèn)的處理方式是壓縮元素，使其能在一行中排列下來(lái)。比如以下代碼：

<view class='outter'><view class='inner'>1</view><view class='inner'>2</view><view class='inner'>3</view><view class='inner'>4</view> </view> .outter{ display: flex; width: 300px; height: 200px; background: pink; } .outter .inner{ background: gray; width: 100px; height: 100px; border: 1px solid #ccc; }

那么會(huì)把這四個(gè)元素?cái)D壓在一行中。即使給元素設(shè)置了寬度也沒(méi)有用的。效果圖如下：

可以通過(guò) flex-wrap 來(lái)改變排列的方式。可以設(shè)置的屬性如下：

nowrap ：不換行。默認(rèn)的。

wrap ：換行。

wrap-reverse ：換行，但是第一行會(huì)在下面。

總結(jié)

以上是生活随笔為你收集整理的微信小程序学习笔记（四）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。