構建一個頁面的骨架

wxml

<view class="chunck color_1">1</view>
<view class="chunck color_2">2</view>
<view class="chunck color_3">3</view>

wxss

.chunck{
  width: 100px;
  height: 100px;
}
.color_1{
  background-color: red;
}
.color_2{
  background-color: blue;
}
.color_3{
  background-color
 
: green;
}

說明	效果
預設是塊級元素，每個塊一行。三個快每個塊佔一行。

如何將這個塊級元素變為行級元素

我們原來的方法1：

.chunck{
  display: inline;
  width: 100px;  // 在小程式中是width波浪線
  height: 100px;// 在小程式中是height波浪線
}

說明	效果
結果呢？成了這個樣子。並不符合我們的需求。

原來的方法2：

.chunck{
  display: inline-block;
  width: 100px;
  height: 100px;
}

說明	效果
這樣就可以了，初步滿足需求。

利用flex容器（彈性佈局）

在view塊外面新增一個容器

<view class="container">
  <view class="chunk color_1">1</view>
  <view class="chunk color_2">2</view>
  <view class="chunk color_3">3</view>
</view>

.chunk{
  width: 100px;
  height: 100px;
}
.container{
  display: flex;  // 使用flex佈局
  background-color
 
: #b9b9ab;
}
.color_1{
  background-color: red;
}
.color_2{
  background-color: blue;
}
.color_3{
  background-color: green;
}

說明	效果
這樣就實現有塊級元素變為行級。

flex-direction

.container{
  display: flex;
  flex-direction: row;  //  不設定預設為row （行佈局） 
  /*flex-direction: column;*/ // 設定為列布局
  background-color: #b9b9ab;
}

效果和上面的一樣。

其他：

屬性	說明	效果
flex-direction: row-reverse	將行級元素倒敘佈局
flex-direction: column-reverse	將塊級元素倒敘佈局

如何將對齊方向改變呢？

.container{
  display: flex;
  flex-direction: column-reverse;  /*再將元素顛倒時可以使用flex-end對齊， 在沒有顛倒時使用上（左）對齊使用flex-start。下（右）對齊flex-end，*/
  /* justify-content: flex-end; */
  background-color: #b9b9ab;
  height: 400px;
}

新增的屬性	原來	結果
justify-content: flex-end;

其他：

屬性	效果
justify-content: center; /* 居中 */
justify-content: space-between; /* 平均分佈 */
justify-content: space-around; /* 等距分佈 */

關於主軸和交叉軸

描述	效果
主軸和交叉軸主要看flex-direction: row，如果row方向佈局那麼row方向就是主軸（從左到右），否則就是交叉軸（從上到下）。

消除間距

當你使用flex-wrap進行超過換行是會發現這樣的效果：

.chunk{
  width: 150px;
  height: 100px;
}
.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: #b9b9ab;
  height: 400px;
}

效果	解決後	解決
		height: 200px;

**原因：**flex會做自適應佈局，每個元素的上下間距是相等的，所以會出現效果圖中的結果，當你把容器的高度設定為200就不會有間隙。