align-items(上中下對齊)
基礎語法
align-items屬性定義專案在交叉軸上如何對齊。（上中下）

.box { align-items: flex-start | flex-end | center | baseline | stretch; }

它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。

 flex-start：交叉軸的起點對齊。
 flex-end：交叉軸的終點對齊。
 center：交叉軸的中點對齊。
 baseline: 專案的第一行文字的基線對齊。
 stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

小程式應用

align-items: flex-start

效果如圖

Wxml程式碼

<view class='zong'>
 <view class='fangxing1'>
    <text>01</text>
  </view>
  <view  class='fangxing2'>
    <text>02</text>
  </view>
  <view  class='fangxing3'>
    <text>03</text>
  </view>  
</view>
 

Wxss程式碼

.zong{
  display: flex; 
  justify-content: space-around;
  align-items: flex-start;/*預設值是stretch，屬性值有：flex-start | flex-end | center | baseline | stretch */
}
.fangxing1{
  width: 60px; height: 60px;  
  background-color:  beige;
}
.fangxing2{
  width: 30px; height: 30px;  
  background-color:  beige;
}
.fangxing3{
  width: 90px; height: 90px;  
  background-color:  beige;
}
 

align-items: flex-end
效果如圖

小程式應用：wxml程式碼沿用上小節

Wxss程式碼

.zong{
  display: flex; 
  justify-content: space-around;
  align-items: flex-end;
/*預設值是stretch，屬性值有：flex-start|flex-end|center|baseline|stretch */
}

align-items: center
效果如圖

小程式應用：wxml程式碼沿用上小節

Wxss程式碼

.zong{
  display: flex; 
  justify-content: space-around;
  align-items: center;
/*預設值是stretch，屬性值有：flex-start|flex-end|center|baseline|stretch */
}

align-items: baseline
效果如圖

小程式應用：wxml程式碼沿用上小節

Wxss程式碼

.zong{
  display: flex; 
  justify-content: space-around;
  align-items: baseline;
/*預設值是stretch，屬性值有：flex-start|flex-end|center|baseline|stretch */
}

align-items: stretch
小程式應用：wxml程式碼沿用上小節

Wxss程式碼

.zong{
  display: flex; 
  justify-content: space-around;
  align-items: stretch;
/*預設值是stretch，屬性值有：flex-start|flex-end|center|baseline|stretch */
}

效果如圖

stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。我們下面看下不設定01這個區塊的高度，效果如何。

小程式應用：wxml程式碼沿用上小節

Wxss程式碼
.

    zong{
      display: flex; 
      justify-content: space-around;
      align-items: stretch;
    /*預設值是stretch，屬性值有：flex-start|flex-end|center|baseline|stretch */
    }
    .fangxing1{
      background-color:  beige;
    }
    .fangxing2{
      width: 30px; height: 30px;  
      background-color:  beige;
    }
    .fangxing3{
      width: 90px; height: 90px;  
      background-color:  beige;
}

效果如圖

可以看到01這個區塊的高度自動擴充套件為整個容器的高度。

歡迎大家收看我的視訊教程：微信小程式介面設計佈局Flex Box精通課程 （微信小程式介面設計必備技能）