微信小程序——UI精讲

flex-direction有两个属性，默认属性flex-direction-row从左到右，flex-direction-row-reverse从右往左。

flex-direction: column从上往下，flex-direction: column-reverse从下往上。

我在对View视图容器进行格式背景颜色定义background-color。定义完只有内容填充才显示背景颜色。其中对高height：100%，width：100%。解决办法是对上级目录pages进行定义高度height：100%。

justify-content ，主轴上的对齐方式，有五个属性

justify-content-center/ flex-start/flex-end/space-around/space-between，居中/左对齐（默认）/右对齐/分散对齐（等距）/两端对齐

align-items 交叉轴对齐方式，有六个属性。

align-items：flex-start/flex-end/center/stretch/baseline,顶部对齐/底部对齐/居中对齐/（元素没有定义高都占满整个容器交叉轴方向）填充/元素文字对齐

flex-grow: 当有多余空间时，元素的放大比例

flex-grow:0；不放大 flex-grow:1；放大各占取一份

flex-shrink 空间不足时按比例缩小，默认 flex-shrink:1不缩小。随着数值增大缩小。

flex-basis 元素在主轴上占据的空间，由于微信的解析程度不够导致flex-basis失效，故这里不用rpx，而是px

flex 是grow shrink basis 的简写

order定义元素的排列顺序

align-self 定义元素自身对齐方式

开发中遇到这样的需求，UILabel上对齐显示，指定行间距，末尾缩略，看似简单的需求，实现中踩了几个坑，记录下来，以备后用。

首先，想到的是用TTTAttributedLabel，上对齐和行间距可以完美解决，但是末尾缩略有问题，一行时正常缩略，多行时在最后一行都会加上省略号，放弃！

然后，UILabel本身没有属性设置上对齐，解决方案是自定义UILabel，在drawTextInRect中对对齐方式进行处理，上对齐的问题解决了，行间距的问题可以通过设置attributedText来解决。还剩一个缩略问题，这个地方有点坑，在UILabel初始化时设置lineBreakMode = NSLineBreakByTruncatingTail;不起作用，需要在attributedText的paragraphStyle中设置才生效。

在使用IOS的UITableView时，时常会用到它的UITableViewStyleGrouped分组多section属性。而默认的情况下使用该属性后section之间的间距会比较大，看着很不舒服。那么可以通过以下的代理方法配置UITableView各个section的间距。

原理其实很简单，显示效果的各个section间距其实是section头部和底部的组合。配置他们的间距就是配置各个section的头部和底部。具体如下示例:

<pre>

//section头部间距

原文地址

以上就是关于微信小程序——UI精讲全部的内容，包括:微信小程序——UI精讲、UILabel上对齐+行间距+末尾省略、UITableView设置Section间距等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！