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

川长思鸟来 2024-02-19 15:39 84阅读 0赞

**align-items(上中下对齐)**

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

基础语法  
align-items属性定义项目在交叉轴上如何对齐。（上中下）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]

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

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

>  flex-start：交叉轴的起点对齐。  
>  flex-end：交叉轴的终点对齐。  
>  center：交叉轴的中点对齐。  
>  baseline: 项目的第一行文字的基线对齐。  
>  stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

**小程序应用**

> align-items: flex-start

效果如图  
![align-items: flex-start][align-items_ flex-start]

> Wxml代码

> 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**  
效果如图  
![align-items: flex-end][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**  
效果如图  
![align-items: center][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**  
效果如图  
![align-items: baseline][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 */
    }

效果如图

![在这里插入图片描述][20190109204903929.png]

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

效果如图  
![在这里插入图片描述][20190109205015302.png]

> 可以看到01这个区块的高度自动扩展为整个容器的高度。

[欢迎大家收看我的视频教程：微信小程序界面设计布局Flex Box精通课程 （微信小程序界面设计必备技能）][Flex Box_]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f637d9f598564012b96091975ef4b09b.png
[align-items_ flex-start]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/4059189b37fa4ce18ecad7055597b02e.png
[align-items_ flex-end]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/14b0501a15d348038e9c928a1f046923.png
[align-items_ center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e3e4d380e5eb4013bda1e831e099574c.png
[align-items_ baseline]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1449580c57f3472da6f614c53d2e82bd.png
[20190109204903929.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2b4bce4909604ff5b8881ad97842f964.png
[20190109205015302.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9dab8cd85c3f4493bce34f288db62e83.png
[Flex Box_]: https://ke.qq.com/course/368348?tuin=2b10d56
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2ddbb8c0ef754476838ebe341b6d77bc.png