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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 开发微信小程序,怎么通过运营提高话题关注度?

    想要搭建一个小程序是很容易的一件事,只要有资金或者有技术,都可以快速搭建起一个小程序。但是,搭建容易,要推广就需要花费心思去做。比如在运营中,要如何去提高小程序发表的话题关注度这个问题,就需要花一些心思去想办法

  • 微信官方为什么要开发小程序,互诚科技公司告诉你

    微信官方近些年在微信公众号与微信小程序的开发上都有相似程度的大动作,就像曾经的公众号一样,如今小程序的开发与推广也开始在风风火火地进行。

  • 微信小程序开发技术教程之Mustache语法要点总结

    开发人员在做小程序开发的时候,会在wxml里,用到Mustache语法。而Mustache其实就是一个logic-less(轻逻辑)模板解析引擎

  • 开发企业微信2.0,融合企业号统一管理再出发

    现在的微信开发市场常见的是公众号开发、小程序开发以及一些商城开发,而这些都是关于自媒体或者企业经营的产品开发,极少有关于企业管理的产品开发出现。

  • 微信小程序开发教程之http请求

    微信小程序的服务器中可以设置四种网络访问域名,每一种类型的网络请求需要设置一个对应的域名,并且要注意的是,在设置域名

  • 从开发公司角度谈微信小程序开发的实践问题

    作为一个对微信小程序开发与运营有一定了解的开发公司小编,对于一些在开发工作期间的注意事项以及开发后的管理、运营问题