微信小程序之 flex 佈局最詳細講解 ！！！

小程序 flex 佈局實現

• 如果想要讓某個空間實現 Flex 佈局，必須要給它的父控件設置 flex 樣式

一、view 默認佈局

index.wxml

<view class="container">
  <view class="s1"></view>
  <view class="s2"></view>
  <view class="s3"></view>
  <view class="s4"></view>
</view>

index.wxss

.container {
  /* display: flex; */
  /* justify-content: space-evenly; */
  /* align-items: center; */
}
.s1 {

.s1 {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}
.s2 {
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
}
.s3 {
  width: 100px;
  height: 100px;
  background-color: greenyellow;
}
.s4 {
  width: 100px;
  height: 100px;
  background-color: red;
}


}

實現效果

1.1 flex 佈局原理

flex 是 flexible Box 的縮寫，意爲“彈性佈局”，用來爲盒狀模型提供最大的靈活性，任何容器都可以指定爲 flex 佈局

• 當我們爲父盒子設爲 flex 佈局以後，子元素的 float、clear 和 vertical-align 屬性將失效
• 伸縮佈局 = 彈性佈局 = 伸縮盒佈局 = 彈性盒佈局 = flex 佈局

採用 Flex 佈局的元素，成爲 Flex 容器（Flex container），簡稱容器，它的所有子元素自動成爲容器成員，成爲 Flex 項目（Item）

總：
通過給 父容器添加 flex 屬性，來控制子盒子的位置和排列方式

1.2 flex 父項常見屬性

1. flex-direction :設置主軸的方向
2. justify-content :設置主軸上的子元素排列方式
3. flex-wrap :設置子元素是否換行
4. align-content :設置側軸上的子元素的排列方式(多行)
5. align-items :設置側軸上的子元素排列方式(單行)
6. flex-flow :複合屬性,相當於同時設置了flex-direction和flex-wrap

二、使用 flex 設置水平彈性佈局

將上述的父容器 （container）屬性 display屬性 設置爲 flex 佈局

index.wxss

.container {
  display: flex;
}

index.wxml 保持不變

2.1 Flex 佈局的方向軸

• Flex 佈局有兩根方向軸：水平的主軸 和 垂直的交叉軸
• Flex 佈局默認是水平主軸的

2.1.1 水平主軸佈局 row （水平向右）

在 父容器設置 flex-direction的值

1. flex-direction: row;（默認值）
   

2. flex-direction: row-reverse;（主軸反向）
   

2.1.2 垂直側軸佈局 column （水平向下）

1. flex-direction: column;（垂直方向）
   

2. flex-direction: column-reverse; （垂直反向）
   

2.2 Flex 中 justify-content 屬性

這裏把盒子的大小改一下，並且設置主軸爲 row，如果想嘗試多種效果的，可以自行修改主軸方向

.container {
  display: flex;
  flex-direction: row; // 設置默認的佈局

}

.s1 {
  width: 50px;
  height: 50px;
  background-color: aquamarine;
}
.s2 {
  width: 50px;
  height: 50px;
  background-color: rebeccapurple;
}
.s3 {
  width: 50px;
  height: 50px;
  background-color: greenyellow;
}
.s4 {
  width: 50px;
  height: 50px;
  background-color: red;
}

2.2.1 flex-start 左居中佈局

給 父容器 justify-content 的屬性設置 爲 flex-start，因爲小程序默認的也是 flex-start

flex-start 和 inital 效果相似

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

2.2.2 flex-end 右居中佈局

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

2.2.3 center 水平居中佈局

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

2.2.4 space-between 兩端佈局

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

2.2.5 space-around （留空等分佈局） 環繞佈局

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

2.2.6 space-evenly 等間距佈局

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

三、使用 flex 設置垂直彈性佈局

首先我們需要修改一下 父容器的樣式：

wxss:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 200px;
  background-color: pink;
}

效果圖

3.1 align-items

適用於單行的情況，屬性值如下：

3.1.1 使用 align-items 設置 flex-start

這也是默認值

wxss:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 200px;
  background-color: pink;
  align-items: flex-start;
}

3.1.2 使用 align-items 設置 center （常用！！！）

設置盒子水平，垂直居中（justify-content 和 align-items 都設置爲 center）

wxss:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 200px;
  background-color: pink;
  align-items: center;
}

效果圖：

3.1.3 使用 align-items 設置 flex-end 低端對齊

wxss:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 200px;
  background-color: pink;
  align-items: flex-end;
}

3.2 align-content 設置側軸上子元素的排列方式（多行）

我們先畫六個格子，這種情況只適合多行
index.wxml

<view class="container">
	<view class="s1"></view>
	<view class="s2"></view>
	<view class="s3"></view>
	<view class="s4"></view>
  <view class="s5"></view>
	<view class="s6"></view>
</view>

index.wxss

.container {
  display: flex;
  background-color: pink;
  width: auto;
  height: 400px;
  flex-wrap: wrap;
}

.s1 {
  width: 200rpx;
  height: 200rpx;
  background-color: aquamarine;
}

.s2 {
  width: 200rpx;
  height: 200rpx;
  background-color: rebeccapurple;
}

/**
其它的盒子省略，樣式是一樣的，顏色不同而已
*/

效果

3.2.1 flex-start 屬性

當我們設置父容器 align-content 爲 flex-start 時，效果如下

3.2.2 flex-end 效果

3.2.3 center

3.2.4 space-between

3.2.5 space-around

3.3 align-items 和 align-content 區別

1. align-items適用於單行情況下，只有上對齊、下對齊、 居中和拉伸.
2. align-content適應於換行(多行)的情況下(單行情況下無效)，可以設置上對齊、下對齊、 居中、拉伸以及平均分配剩餘空間等屬性值。
3. 總結就是單行找align-items多行找align-content

四、其它父類屬性

4.1 flex-grow 使用

我們發現上面的佈局留了了一點空隙，所以我們可以使用 flex-grow 補全這個空白，比如我們在紫色的 框框當中設置 flex-grow 屬性，這樣就把這個多餘的部分給撐住了。

wxss

.s2 {
  width: 100px;
  height: 100px;
  flex-grow: 1;
  background-color: rebeccapurple;
}

我們還可以在其他的盒子當中設置這個 flex-grow 屬性，這樣，這個盒子就會平分這個空間

4.1 flex-wrap 設置子元素是否換行

1. flex-wrap: nowrap; 默認不換行
2. flex-wrap: wrap; 會另起一行排列
   默認情況下，flex 佈局中默認是不換行的。如果排不下，會縮小盒子元素的寬度。
   

五、flex 佈局之子項屬性

5.1 align-self

控制子項在側軸上的排列方式

可以運行單個項目與其他的項目有不同的對齊方式，可以覆蓋 align-items 屬性。默認爲 auto，表示繼承父類的 align-items 屬性，如果沒有父元素，則等同於 strtch

像這樣，我們設置父親屬性爲 align-items: flex-start ，給 4號各格子設置 align-self: flex-end; 就會出現如下效果

五、總結

1. 事件綁定 分爲冒泡事件和阻止事件，bind 默認爲冒泡事件，catch爲阻止事件，業務邏輯要分析清楚
2. WXSS樣式全局樣式（template） 與局部樣式（wxss）
3. WXSS 的佈局，display flex
   • 橫向佈局： justify-content 有5個屬性，分別是
     • flex-start 靠左上角
     • flex-end 靠右上角
     • flex-center 居中處理
     • space-around 兩端留空，均勻分佈
     • space-between 首端兩邊，有多個方塊，就會緊挨兩端
     • space-evenlt 主軸均勻分佈
   • 縱向佈局：align-items 也有5個屬性，分別是
     • flex-start 左上
     • flex-end 左下
     • center 靠左居中
     • stretch 拉伸
     • baseline 基線對齊
   3. flex 佈局，修改軸參數
      • row 從左到右
      • row-reverse 從右到左
      • column 靠左，從上到下
      • column-reverse 靠左，從下到上