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

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”,就一直与APP之间存在话题,类似小程序取代APP、开发小程序还是开发APP等话题层出不穷,但其实,两者并非全是优势或者全是劣势,需求开发者更是要对比两者的优劣势之后,才能做出开发APP还是小程序的决策。

  • 为什么我们都说微信小程序会火?

    微信小程序自上线以来的不温不火到现在的温温火火,可能还会在未来变得红红火火,都在验证着很多人对小程序会火的预言的正确性。为什么会有那么多人看好小程序的未来,又为什么那么多会觉得小程序终将会火?其实这些为什么,都是因为有了预兆。

  • 微信小程序能给用户带来什么使用价值及意义?

    用户之所以使用微信小程序,很大程度都是因为小程序能给用户带来方便,让生活通过小程序而更加便捷。所以,小程序之于用户来说的使用价值与意义,我们可以从它带来的便利性

  • 分享:微信小程序开发过程中,常用的功能代码总结

    开发者进行微信小程序开发的时候,有一些比较常用的功能代码是可以学习使用的,根据基础的功能代码进行小调小整,就能调整成自己想要的代码

  • 就目前情况看,企业开发微信小程序还是APP?

    一晃半年过去,微信小程序已经上线这么长时间的,在这半年里,其经历过沉沉浮浮、起起落落,从差点被市场放弃而后又重获新生,各类企业商家对小程序的开发态度仍旧是比较模糊的概念,特别是现在,有别于小程序之前的低迷状态,正是由于它的发展,所以才令更多的人