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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 小程序开发亮点:微信小程序的价值所在

    关于小程序开发,目前还是处于一个初级阶段,但这并不代表它没有价值

  • 微信小程序开发结合什么商业模式会更有利于其发展

    随着微信小程序的高调崛起,各类行业的需求开发者也在逐渐将目光看向小程序开发。

  • 微信小程序开发——企业品牌宣传推动力

    企业拥有自己的品牌,随之而来的工作就是进行宣传推广,而企业品牌策划实施的要点,主要就分为三个部分:方式创新、体验满意跟促进分享。这每一个方面都是树立品牌形象、提升品牌知名度的必要过程,依靠微信小程序开发区推动企业品牌宣传也必须如此。

  • 案例论证广州微信小程序开发后实现商业转化?

    微信小程序刚被开发出来的时候,是将其定位成为工具性的产品。而很多一开始开发的工具性小程序,是比较难去实现商业性转化的,很多开发者在初涉小程序的时候

  • 开发微信小程序商城系统,形成O2O场景互动格局

    在微信小程序开发技术的支持上,衍生出一种叫微信小程序商城系统的产品

  • 微信小程序后台返回json出现报错的解决方法

    微信小程序与java后台进行交互,需要获取json数据显示到页面,但是有时候会出现小程序链接java后台,但调用起来后台并不能获取到