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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 从开发公司角度谈微信小程序开发的实践问题

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

  • 已有APP的公司要不要开发对应的微信小程序

    虽然小程序是以应用平台作为开发点,拥有着基本的App功能,但是目前看来

  • 坐拥微信小程序,颠覆传统教育方式

    随着现代生活水平、消费习惯以及互联网的发展,传统的以线下场景为主的教育模式已经不太能适应这个现代社会的发展、不能完全符合人们的学习需求。所以,用传统方式来经营的教育行业急需要调整完善自身的发展方式,以此来融入到互联网的发展潮流当中。

  • 旅行社要不要开发微信小程序?可以怎么用?

    这是一份假装真心实意的问答调查情景式推文,总结一下旅行社与小程序之间剪不断理也不乱的关系,仔细看看还有点小用处。

  • 微信小程序搜索排名的规则是怎样的

    在网站排名建设中,企业官网在各大网站的平台位置不是随随便便就能有的,而是要经过一定的规则竞争、筛选后才有排名先后的区别。而在前不久,微信小程序的搜索入口也开始了排名竞争。所以,想要让自己的小程序在搜索行列的排名比较靠前、更加容易被用户搜索到,就需要了解一下微信小程序搜索排名的规则究竟是怎么样的。

  • 品牌电商公司如何借力微信小程序开发来促进发展

    虽然微信小程序刚开始的定位是为用户提供线下工具性服务,但却也因为这个定位限制了小程序的发展以致带来不满意的用户体验与开发体验。在后续的调整后,小程序也可以用作线上服务使用,