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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 小程序开发公司分析如何开发获取用户基本信息

    微信小程序平台运营时,要获取获取用户的基本信息,是需要用户授权的,而这种授权获取的开发,需要调用wx.login接口、login接口等

  • 两个有效的微信小程序互推引流方法

    在之前的文章中,小编讲过说公众号与小程序关联引流的方法、好处,小程序与实体店的引流方法、好处,唯独没说过两个

  • 微信小程序开发之新功能开放预告

    据某不知名群众报道,腾讯微信又开始内测一项新功能,虽然这样的消息流出套路已经不止一次,

  • 微信小程序开发带来的创业竞争力与前景分析

    微信小程序的出现,在应用市场与微信平台上都激起了一层层波澜。它的优势、它的新鲜感、它的想象空间都吸引了很多创业者的眼球。小程序

  • 微信小程序商城开发报价问题

    定制开发微信小程序商城,就会面对报价的问题,怎样的报价才是准确的、符合市场现状的?这是想要开发小程序商城的商家需要去了解的问题。站在外包开发公司的立场,小编跟大家说说一些与开发报价相关的东西。

  • 关于降低微信小程序定制开发成本的两点建议

    虽然说微信小程序定制开发的价格比APP开发低了很多倍,但是一些不必要的费用还是需要去避免的,特别是对于微信小程序定制开发成本把控比较严格的一些企业商家来说,更加需要去降低开发成本,把钱花在刀刃上。对此,小编有几点关于