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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序开发能给线下商家带来哪些好处

    小程序的出现,在一定程度上方便了微信用户的生活外,也给企业商家带来新一轮的微信营销利益,

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

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

  • 不懂小程序开发?广州微信小程序开发公司帮你搞定!

    小程序在近期不断被放宽限制,很多企业也重新审视小程序在未来的发展前景,开始着手开发专属小程序

  • 小程序开发技术教程:数据的绑定处理与data数据设置

    开发微信小程序,需要对数据进行设置与绑定,以便于处理数据。其中,wxml的动态数据均来自对应Page的data,通过使用Mustache语法

  • 微信小程序开发的热门类目有哪些

    微信小程序的开发类目在不断被放开,开发热度也呈上升趋势,越来越多的用户企业商家将目光看向小程序,去开发、去发展这个平台。不过小程序

  • 微信小程序上亿日活跃用户,开发优势日渐显现

    微信小程序上线之前,很多人对它满怀期待,但是线上体验过后,大部分用户又都回归手机应用,因为用户体验并不是多好

123彩票官网 198彩票官网 123彩票官网 凤凰彩票 双赢彩票 159彩票 大兴彩票官网 满源彩票 江南娱乐充值 128彩票充值中心