設置在主軸上的排列方式：
默認情況下，主軸的方向是從左到右。在主軸方向上，可以通過 justify-content 屬性來設置他們的排列方式。排列方式有以下幾種：

flex-start ：項目靠近父盒子的左側。默認采用的就是這種排列方式。示例圖如下：

2 flex-end ：項目靠近父盒子的右側。

2. center ：所有項目會挨在一起在父盒子的中間位置。

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

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

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

設置在側軸上的排列方式：
默認情況下，側軸的方向是從上到下。在側軸方向上，可以通過 align-items 屬性來設置他們的排列方式。排列方式有以下幾種：
6. flex-start ：起始端對齊。默認就是這種對齊方式。

7. flex-end ：末尾段對齊。

center ：中間對齊。

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

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

效果圖為：

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

<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{...}

那么效果圖為：

更換主軸和側軸方向
主軸默認的方向是從左到右，側軸的方向默認是從上到下，當然也可以進行修改。可以通過 flex-direction 進行修改。可以修改的參數為以下：
11. row ：默認屬性。從左到右。

12. row-reverse ：從右到左。

column ：從上到下。

column-reverse ：從下到上。

換行
默認情況下，元素個數如果超過一定數量，那么在一行當中就排列不下。此時 flex 默認的處理方式是壓縮元素，使其能在一行中排列下來。比如以下代碼：

<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; }

那么會把這四個元素擠壓在一行中。即使給元素設置了寬度也沒有用的。效果圖如下：

可以通過 flex-wrap 來改變排列的方式。可以設置的屬性如下：

nowrap ：不換行。默認的。

wrap ：換行。

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

總結

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

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