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

2018/12/29 17:21:15
摘要: 接上次视图容器组建详解(一)与(二),我们今天把最后两个组件样式

接上次视图容器组建详解(一)与(二),我们今天把最后两个组件样式说明一下,顺便贴出一些相关的属性内容。

1、视图样式justify-content: center

效果图:

 微信小程序开发技术教程

WXML代码如下:

<view class="flex-wrp justify-content-center">

    <view style="background: red"></view>

    <view style="background: green"></view>

    <view style="background: blue"></view>

</view>

WXSS代码如下:

.justify-content-center{

    flex-direction:row;

    justify-content: center;

}

.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: space-between

效果图:

 微信小程序开发技术教程

WXML代码如下:

<view class="flex-wrp space-between">

  <view style="background: red"></view>

  <view style="background: green"></view>

  <view style="background: blue"></view>

</view>

WXSS代码如下:

.space-between{

  flex-direction:row;

  justify-content: space-between;

}

.flex-wrp{

  height: 100px;

  display:flex;

  background-color: #FFFFFF;

}

.flex-item{

  width: 100px;

  height: 100px;

}

.red{

  background: red;

}

.green{

  background: green;

}

.blue{

  background: blue;

}

主要的属性:

排列方式(flex-direction),用于wxss要属性:

属性

描述

row

横向排列

column

纵向排列

 

弹性项目内容对其(justify-content),用于wxss

属性

描述

flex-start

弹性项目向行头紧挨着填充

flex-end

弹性项目向行尾紧挨着填充

center

弹性项目居中紧挨着填充

space-between

弹性项目平均分布在该行上

space-around

弹性项目平均分布在该行上,两边留一半的间隔空间

 

项目在容器内侧轴方位的对齐方式(align-items),用于wxss

属性

描述

stretch

默认值,弹性项目被拉伸以适应容器

center

弹性项目位于容器中心

flex-start

弹性项目位于容器开头

flex-end

弹性项目位于容器结尾

baseline

弹性项目位于容器基线上

 

声明:文章"微信小程序开发技术教程:视图容器组件详解(三)"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序干货
电话咨询:18011971195(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 初创企业开发微信小程序会有什么好处

    相比起APP开发,微信小程序开发对于刚刚步入创业阶段的企业来说会是更好的选择,在资金、人力、物力都还不成熟的阶段,企业开发小程序会比开发App获得更多的好处。这些好处主要就有以下三个部分:

  • 微信小程序开发,参数取值方法介绍

    一个微信小程序开发项目,在整个开发流程中,必要用到的就是参数取值,一般来说,常见的参数取值有列表index下标取值与form表单取值

  • 微信小程序开发工具改版上线,开发变得更容易

    为了满足开发者在小程序开发各个阶段的需求,微信官方在近日上线了全新改版的微信开发者工具,新增了测试系统、腾讯云工具、小程序分阶段发布、小程序性能监控

  • 开发拼团小程序,让商城营销传播效果更佳

    对于微信小程序的开发方向,由于小程序开发限制条件比公众号更宽松,所以它的开发方向想象空间更大,在服务类目与开发条款允许的范围内,基本能想象出来的开发内容与形式都能被最终呈现出来。比如商城类的折扣小程序、集赞小程序、拼团小程序。本文以拼团小程序为例,说下这类小程序的开发价值。

  • 小程序开发公司:教你进行事件的触发与绑定开发

    事件的触发与绑定是小程序开发过程中的基础工作内容之一,因为事件是视图层到逻辑层的通讯方式,他可以将 用户的行为反馈到逻辑层进行处理

  • 小程序的上线,到底带来了什么

    程序在还没面世前就已经众说纷纭,犹如百家争鸣势头,各方对小程序功能、小程序开发、小程序使用等各个方面都有着自己理解的说辞。