微信小程序样式Flex Box精通课程-Flex容器的属性-align-items(上中下对齐)

align-items(上中下对齐)

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

基础语法
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精通课程 （微信小程序界面设计必备技能）