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

版权声明:摇亿.黄菊华 https://blog.csdn.net/u013818205/article/details/86178474

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

效果如图
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
效果如图
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
小程序应用: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

小程序应用: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精通课程 (微信小程序界面设计必备技能)

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/u013818205/article/details/86178474
0条评论
添加一条新回复
  
今日推荐