|
|
|
|
移动端

2.6 垂直排列对齐方式

《微信小程序开发入门精要》第2章布局,本章主要介绍了小程序中的主要布局方式,通过这些布局,可以设计出各式各样的UI。本节为大家介绍垂直排列对齐方式。

作者:李宁来源:人民邮电出版社|2017-12-13 15:21

开发者盛宴来袭!7月28日51CTO首届开发者大赛决赛带来技术创新分享

2.6 垂直排列对齐方式

对于垂直排列来说,如果改变对齐方式,是否可以采用水平排列的方式呢?例如,下面的布局代码是否有效呢?

  1. <view class="flex-wrp" style="flex-direction:column;justify-content: flex-end;"> 
  2. <view class="flex-item bc_green"></view> 
  3. <view class="flex-item bc_red"></view> 
  4. <view class="flex-item bc_blue"></view> 
  5. </view> 

保存文件后,会看到如图2-9所示的效果。

很显然,垂直排列的3个view并没有右对齐。对于垂直排列来说,需要使用align-items属性(默认是左对齐),而不是justify-content属性,这两个属性的取值基本上相同。例如,下面的布局代码让3个垂直排列的view右对齐。

  1. <view class="flex-wrp" style="flex-direction:column;align-items: flex-end;"> 
  2. <view class="flex-item bc_green"></view> 
  3. <view class="flex-item bc_red"></view> 
  4. <view class="flex-item bc_blue"></view> 
  5. </view> 

垂直排列右对齐的效果如图2-10所示。

下面的布局代码让垂直排列中心对齐。

  1. <view class="flex-wrp" style="flex-direction:column;align-items: center;"> 
  2. <view class="flex-item bc_green"></view> 
  3. <view class="flex-item bc_red"></view> 
  4. <view class="flex-item bc_blue"></view> 
  5. </view> 

垂直排列中心对齐的效果如图2-11所示。

如果垂直排列是右对齐或中心对齐的方式,那么如果折列会是什么效果呢?例如,下面的布局代码垂直方向右对齐,并且折列。

  1. <view class="flex-wrp" 
  2. style="height:300px;flex-direction:column;align-items: flex-end;flex-wrap:wrap;"> 
  3. <view class="flex-item bc_green"></view> 
  4. <view class="flex-item bc_red"></view> 
  5. <view class="flex-item bc_blue"></view> 
  6. <view class="flex-item bc_blue"></view> 
  7. <view class="flex-item bc_green"></view> 
  8. <view class="flex-item bc_red"></view> 
  9. </view> 

运行效果如图2-12所示。

从图2-12所示的效果来看,即使是右对齐,如果需要折列,显示的第一列仍然是从靠左方向开始的(从view的背景色就可以看出,第4个view的背景色是蓝色),然后向右折列(但最后一列需要紧贴着父视图右边缘,因为是右对齐)。如果是中心对齐,方式相同。

下面是中心对齐,并且折列的布局代码。

  1. <view class="flex-wrp" 
  2. style="height:300px;flex-direction:column;align-items: center;flex-wrap:wrap;"> 
  3. <view class="flex-item bc_green"></view> 
  4. <view class="flex-item bc_red"></view> 
  5. <view class="flex-item bc_blue"></view> 
  6. <view class="flex-item bc_blue"></view> 
  7. <view class="flex-item bc_green"></view> 
  8. <view class="flex-item bc_red"></view> 
  9. </view> 

显示效果如图2-13所示。


喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码

 

51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Cisco网络技术教程(第2版)

本书作为思科认证体系中的入门级教材,主要讲述了网络的基本知识和思科设备的基本命令,以及路由、交换等深层次网络知识的入门知识,其体系...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊