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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 广州微信小程序,组合拳开发促进高效收银

    关于酒店、餐饮等行业的收银结账开发票工作,经常需要排队已经成为消费者的诟病。为了解决这个常存的麻烦,微信官方于6月29日在厦门的公开课里提出了微信小程序开发“组合拳”模式,

  • 微信小程序开发教程之index 页面解析

    微信小程序的每一个页面都包含三个文件,分别是.js(处理逻辑),.wxml(描述页面内容),.wxss(配置页面样式),index 页面同样

  • 广州小程序开发公司总结微信小程序最近升级了哪些新能力

    微信官方通过微信公开课向外界宣布,他们在微信小程序开发上又有新动作,各种新能力说升级就升级

  • 微信小程序新增四项能力,信息展示开发越强大

    微信官方在小程序功能的开放之路真的是越走越远,现在又就着信息展示模块来开放了四项新能力,来提升用户的体验以及小程序运营者的管理体验,小编只能说这次的事情搞得依旧深得人心。按照写作流程,在夸完新能力深得人心之后,小编就要来介绍一下这四项新能力了。

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

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

  • 广州个人开发者适合开发什么类型的小程序

    相对于企业商家这些拥有较为充足资金、人力、物力的小程序开发者来说,个人开发者在开发小程序的选择范围更小一些。小编根据个人开发者多方面的局限总结出几个开发方向,以供个人开发者参考借鉴。

广西快三 江苏快3投注 pc蛋蛋 江苏快3开户 pc蛋蛋 pc蛋蛋 pc蛋蛋手机官网 pc蛋蛋注册 pc蛋蛋注册 pc蛋蛋