|
|
51CTO旗下网站
|
|
移动端

2.5 水平排列对齐方式

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

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

【51CTO技术沙龙】10月27日,让我们共同探索AI场景化应用实现之道

2.5 水平排列对齐方式

前文所述的水平排列都是从左侧开始排列的,这是默认的对齐方式:左对齐。这种对齐方式是默认的,或在style属性中加入justify-content: flex-start,代码如下:

  1. <view class="flex-wrp" style="flex-direction:row;justify-content: flex-start;"> 
  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> 

除了左对齐,还有右对齐和中心对齐,只需要将justify-content的值改成flex-end或center,即可实现右对齐或中心对齐的效果。右对齐的布局代码如下:

  1. <view class="flex-wrp" style="flex-direction:row;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-7所示。

中心对齐的代码布局代码如下:

  1. <view class="flex-wrp" style="flex-direction:row;justify-content: 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-8所示。


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

51CTO读书频道二维码

 

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

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

读 书 +更多

Grails权威指南

本书译自Grails项目负责人Graeme Keith Rocher所著的“The Definitive Guide to Grails”一书,着重介绍了如何在Grails框架下使用Groovy语...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊