位置:电子教程 > Flex Box小程序应用 (如果看不到内容请使用360浏览器) 推荐学习资源
Flex Box基本概念
Flex容器的属性
Flex项目的属性
Flex布局样例
当前阅读教程:Flex Box小程序应用 > 垂直对齐(align-items)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 内容水平对齐(justify-content) 下一篇: 各行对齐(align-content)

align-items属性定义项目在交叉轴上如何对齐。示意图如7-22所示。

image.png

代码示例

小白教程网www.2d5.net

如下:

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

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

n  flex-start:交叉轴的起点对齐。

n  flex-end:交叉轴的终点对齐。

n  center:交叉轴的中点对齐。

n  baseline: 项目的第一行文字的基线对齐。

n  stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。


1.align-items: flex-start

.wxml文件代码示例

小白教程网www.2d5.net

如下:

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

.wxss文件代码示例

小白教程网www.2d5.net

如下:

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

效果如图7-23所示

image.png



2.align-items: flex-end

.wxml文件代码示例

小白教程网www.2d5.net

如下:

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

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.zong{
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
/*默认值是stretch,属性值有:flex-start|flex-end|center|baseline|stretch */
}

效果如图7-24所示

image.png



3.align-items: center

.wxml文件代码示例

小白教程网www.2d5.net

如下:

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

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.zong{
  display: flex;
  justify-content: space-around;
  align-items: center;
/*默认值是stretch,属性值有:flex-start|flex-end|center|baseline|stretch */
}

效果如图7-25所示

image.png



4.align-items: baseline

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
 <view>
    <text>01</text>
  </view>
  <view >
    <text>02</text>
  </view>
  <view >
    <text>03</text>
  </view> 
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.zong{
  display: flex;
  justify-content: space-around;
  align-items: baseline;
/*默认值是stretch,属性值有:flex-start|flex-end|center|baseline|stretch */
}

效果如图7-26所示


image.png



5.align-items: stretch

.wxml文件代码示例

小白教程网www.2d5.net

如下:

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

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.zong{
  display: flex;
  justify-content: space-around;
  align-items: stretch;
/*默认值是stretch,属性值有:flex-start|flex-end|center|baseline|stretch */
}

效果如图7-27所示

image.png

stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。我们下面看下不设置01这个区块的高度,效果如何。

.wxml文件代码示例

小白教程网www.2d5.net

如下:

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

.wxss文件代码示例

小白教程网www.2d5.net

如下:

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

效果如图7-28所示

image.png

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


上一篇: 内容水平对齐(justify-content) 下一篇: 各行对齐(align-content)
毕业设计网             广告联系QQ:45157718(微信同号)