微信小程序开发技术教程:视图容器组件详解(二)

2018/12/28 17:22:06
摘要: 接上次视图容器组建详解(一),我们今天继续来介绍两个组件样式。

接上次视图容器组建详解(一),我们今天继续来介绍两个组件样式。

1、视图样式justify-content: flex-start

效果图:

 微信小程序定制开发教程

WXML代码如下:

<view class="flex-wrp flex-start">

    <view style="background: red"></view>

    <view style="background: green"></view>

    <view style="background: blue"></view>

</view>

WXSS代码如下:

.flex-start{

    flex-direction:row;

    justify-content: flex-start;

}

。flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}

 

2、视图样式justify-content: flex-end

 微信小程序定制开发教程

WXML代码如下:

<view class="flex-wrp flex-end">

    <view style="background: red"></view>

    <view style="background: green"></view>

    <view style="background: blue"></view>

</view>

WXSS代码如下:

。flex-end{

    flex-direction:row;

    justify-content: flex-end;

}

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.flex-item{

    width: 100px;

    height: 100px;

}

。red{

    background: red;

}

。green{

    background: green;

}

.blue{

    background: blue;

}


声明:文章"微信小程序开发技术教程:视图容器组件详解(二)"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序干货
电话咨询:18011971195(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序能怎么玩——广州开发公司总结玩法集锦

    我们总是在跟随潮流,说着微信小程序有多好多好、开发小程序有多新鲜。但其实,很多人都不了解,小程序有什么用

  • 微信小程序开发技术教程:视图容器组件详解(一)

    微信小程序开发的时候,需要设计一个视图容器组件的问题,它有多种视图样式,每一种都有需要注意的内容。所以

  • 广州微信小程序开发骗局:模板开发骗局泛滥

    在广州微信小程序的开发上,不是每一个企业都是真正有需求要涉及小程序开发的

  • 现在开发微信小程序,是否为时已晚?

    微信小程序已经上线半年由于,据不完全统计,现有的微信小程序大概已经达到两万个以上的数量,加上一些正在开发当中的小程序,数量加起来也应该有三万来个。很多企业商家看到这个数据,就会觉得,现在的小程序市场是否已经被抢占完毕,再去开发微信小程序是否

  • 坐拥微信小程序,颠覆传统教育方式

    随着现代生活水平、消费习惯以及互联网的发展,传统的以线下场景为主的教育模式已经不太能适应这个现代社会的发展、不能完全符合人们的学习需求。所以,用传统方式来经营的教育行业急需要调整完善自身的发展方式,以此来融入到互联网的发展潮流当中。

  • 就目前情况看,企业开发微信小程序还是APP?

    一晃半年过去,微信小程序已经上线这么长时间的,在这半年里,其经历过沉沉浮浮、起起落落,从差点被市场放弃而后又重获新生,各类企业商家对小程序的开发态度仍旧是比较模糊的概念,特别是现在,有别于小程序之前的低迷状态,正是由于它的发展,所以才令更多的人

双赢彩票官网 166彩票官网 满堂彩 满堂彩 顺金彩票官网 众赢彩票官网 好彩客充值 159彩票充值中心 彩都会彩票充值中心 198彩票官网