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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序开发教程:文字滚动的两种实现方式

    在微信小程序的开发中,可以实现文字上下滚动或者跑马灯效果,主要有两种方式可以去开发实现,分别是使用textarea和text两种

  • 小程序开发亮点:微信小程序的价值所在

    关于小程序开发,目前还是处于一个初级阶段,但这并不代表它没有价值

  • 读懂广州微信小程序开发公司开发流程,识破微信开发骗局

    目前光柱市场上的微信小程序开发公司层出不穷,其中有正规的,当然相应的也存在骗局

  • 手势开发研究,微信小程序的单触摸电与多触摸点

    在微信小程序的开发过程中,手势常常被应用在canvas、交互的开发中,所以手势对一些开发效果来说是比较重要的

  • 微信小程序开发与APP开发的区别

    微信小程序被说看成是一个原生App似的产品,这并不是空穴来风,而是小程序在开发上的定位与功能

  • 微信小程序,是否会成为O2O重新崛起的契机?

    O2O这一商业模式,在经过一段时间的推广与试水之后,效果并不理想,除了出行以及餐饮外卖这两个领域在O2O模式上有一定的发展之外,很多行业都取不到实质性的发展,甚至到了谈O2O色变的地步。而造成这种局面的主要原因是什么?小编认为是缺乏一个可以连接线上场景与线下场景的实质式平台。