456棋牌游戏中心

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

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(黄先生)
在线留言:
微信扫码,关注我们
456棋牌游戏中心相关的文章
  • 开发微信小程序商城系统,形成O2O场景互动格局

    在微信小程序开发技术的支持上,衍生出一种叫微信小程序商城系统的产品

  • 餐饮行业开发微信小程序,有什么形式可以选择

    衣食住行一直是人类生活的必须环节,而且这四个方面的商家经营模式大多数都是以线下门店体验为主。现在小编以“食”这个维持人类生命的重点来举例,说说餐饮行业开发微信小程序,到底可以有什么形式可供选择。

  • 定制开发微信小程序之前需要搞清的4个问题

    一个企业想要定制开发小程序之前,必须要对小程序有一定的了解,特别是以下4个问题,在定制开发之前一定要弄清楚,才能帮助企业做出正确的开发决策。

  • 微信小程序后台返回json出现报错的解决方法

    456棋牌游戏中心 微信小程序与java后台进行交互,需要获取json数据显示到页面,但是有时候会出现小程序链接java后台,但调用起来后台并不能获取到

  • 广州微信小程序开发前景如何,互诚科技来告诉你

    无论是开发微信小程序还是其他微信产品,除了要考虑其开发费用之外,还要考虑所开发的产品是否有持续发展的前景

  • 广州微信小程序开发公司:如何打造爆款小程序

    “广州小程序开发之如何打造爆款小程序”这个标题,广州小程序开发部分只是为了打个假广告,

69棋牌 开元棋牌APP 天天乐棋牌 翡翠棋牌APP官网下载 天天乐棋牌APP下载 翡翠棋牌 69棋牌游戏 456棋牌 京都棋牌 456棋牌