小程序中常用的语法的介绍

发布日期： 2018-09-18 阅读量： 作者： 网络

本篇文章给大家带来的内容是关于小程序中常用的语法的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

接下来我将会从一个初学者的身份，当然，此后的文章不会对小程序的知识点一一都做很细致的介绍，主要是对比android的一些思想，进行一些个人的想法阐述。

api语法的介绍

一、盒子模型Flex

1、flex-wrap：

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

2、justify-content：所有子view在父View显示的位置

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
*space-between：两端对齐，项目之间的间隔都相等。因此这个可以认为是设置权重布局，每个子View占一份。如果子View只有一个，则等同于flex-start
*space-around：平均分布在该行上，两边留有一半的间隔空间。项目之间的间隔比项目与边框的间隔大一倍。如果（作用在父view上）只有一个子view，则其实就是让子View居中对齐

space-between属性图形展示：

3、align-content

内容居中。只适用于多行的flex容器，单行不起作用
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

4、align-items

让每个View在父view的对齐方式。适用于所有的flex容器。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

5、示例

1）让容器的子View居中显示
在容器（父View）中添加：

 display: flex;
 align-items: center;

# 小程序 # 基础篇

上一篇: 如何用 CSS 创建不规则形状？

下一篇: 如何使用 iframe 引入短链并展示对应内容？

小程序中常用的语法的介绍

随便看看