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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序带来的改变有哪些方面?

    微信小程序出现了一年了,越来越多的用户知道小程序的存在,也越来越多的用户开始去使用它,用户使用惯性正在逐渐养成

  • 开发微信小程序,怎么通过运营提高话题关注度?

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

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

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

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

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

  • 微信小程序开发升级应用,玩转高端多媒体功能!

    自从四月份微信官方像开了挂一样地开发小程序之后,它升级应用功能的脚步就再也停不下来,所以现在又带来了两个新的高端功能,让运营者可以轻松玩转多媒体功能

  • 微信小程序开发是什么?如何开通微信小程序

    微信小程序,简称小程序,洋气名曰mini program,过去式名称曰”小应用“。其实,微信小程序就是一种微信版本的轻应用