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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 小程序开发过程之数据请求封装与模板的使用

    在开发小程序过程中,需要对数据请求进行封装,在引入模板的时候,也需要了解模板定义及其引入方法。本文这对这两个开发

  • 开发一个购物类小程序需要哪些必备功能

    现在的微信平台,不仅仅有微信分销商城、微商城这类电商产品,连最近开发程度火热的微信小程序也有了相应的商城模式。既然作为电子商城,就必须要有齐全的必备功能来保障其运行。小编就以购物类的小程序为例,来谈谈开发这么一个小程序需要哪些必备功能。

  • 微信小程序开发教程:文字滚动的两种实现方式

    在微信小程序的开发中,可以实现文字上下滚动或者跑马灯效果,主要有两种方式可以去开发实现,分别是使用textarea和text两种

  • 微信小程序开发市场,真的有免费模板吗?

    现在去网页上搜索微信小程序开发模板,都会出现很多文案或者链接都在说免费模板、免费模板跟免费模板。可是,现在的市场上,真的有免费的小程序开发模板吗?其实还真有,不过好不好用、会不会骗人就是另外一回事了。

  • 微信小程序开发涉及到电商领域后为什么更受企业欢迎?

    微信小程序在开发前期,由于定位原因,更加偏向于线下方面的发展而忽略了对线上流量的攫取

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

    接上次视图容器组建详解(一),我们今天继续来介绍两个组件样式。

河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三