FlexBox的align-content到底是什么鬼，我也搞了好半天才开发出来，目前工具中WViewRow组件使用了此属性，WViewColumn中此属性不起作用。
下图是justify-content、align-items和align-content属性组合使用的两个例子，请仔细理解一下。
 
大家看出来区别了吗，第一个整体右侧排列（justify-content=flex-end），第一行和第二行短黄和短红所在行上对齐（align-items=flex-start）。第二个整体左对齐，第一行和第二行短黄和短红是下对齐（align-items=flex-end）。第一个的第一行对齐顶端、第二行对齐底部（align-content=space-between）。第二个的顶端和底部有间隔（align-content=space-around）。
第一个属性如下：
 
第二个属性如下：
 
以上属性的组合使用决定了内部组件换行显示，每行内部排列方式，行之间排列方式。可以简单的把align-content属性理解为块属性，当出现多行时候，此属性影响每行也就是每块在view中的布局。
此贴内容由于是三个属性组合，看过解释后请实际操作一下吧。

小程序UI设计（8）-布局分解-FlexBox的align-content应用的更多相关文章

  1. 小程序UI设计（1）-布局

    工欲善其事必先利其器.下面为大家介绍一款工具软件,如何做到轻松布局. 工具简介:小程序layout设计工具,可视化方式进行小程序UI设计.通过鼠标拖拽组件方式进行UI布局.工具提供符合微信视觉统一的模 ...

  2. 小程序UI设计（4）-符合视觉规范-表单输入视觉规范

    下图是微信官方的要求 按照小程序UI设计(3)-符合视觉规范-列表视觉规范同样的方式,我们可以设计一样符合规范的输入项目.规范中没有说明padding-left的大小,我们暂定是15px.这样最外层v ...

  3. 小程序UI设计（3）-符合视觉规范-列表视觉规范

    上一篇我们介绍了字体规范,此贴介绍一下在列表中如何组合使用.下图是微信官方的要求   在工具中通过拖拽组件可以制作出一样的效果拖拽一个WViewRow.这个组件是小程序的view,flex-direc ...

  4. 小程序UI设计（7）-布局分解-左-上下结构

    FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解  左边结构树中WViewRow下面有两个WViewColumn.WViewRow是横向排列,WViewColumn是纵向排列 ...

  5. 小程序UI设计（9）-文字排版

    小程序中一般很少大段落的文字,基本是4.5个字的主题.一行标题.一行摘要.两行描述.显示时超出部分用省略号代替.下面结合工具使用介绍一下文字排版的方法.先看效果图.  工具中属性设置如下图:两行文字属 ...

  6. 小程序UI设计之-介绍篇

    工具截图 此工具通过可视化操作进行布局,依据iphone6尺寸设置画布,可以自动生成rpx和百分比的wxss.后续还会增加js代码自动生成.工具中组件按照微信小程序开发规范进行了缺省设置,margin ...

  7. 小程序UI设计（10）-巧用模板，事半功倍

    工具中为小程序员们准备了符合微信开发规范的模板.之前帖子中介绍的规范都在模板中已经设计好了,可以直接复制粘贴使用.下图中的样式是从模板直接复制过来的.实际使用时只要更换为自己的图片和文字即可.自动生成 ...

  8. 小程序UI设计（2）-符合视觉规范-字体规范

    下图是微信小程序官方要求字体规范 根据此要求小程序设计工具定制了符合规范的组件.如下图 工具使用时,将左侧组件拖拽到设计区域即可.字体大小和颜色都是按照规范设置的.在使用时根据微信要求在不同位置摆放即 ...

  9. 小程序UI设计（6）-布局分解-九宫格

    今天我们来个庖丁解牛.对于一个完整的组合组件,看看通过工具是如何轻松完成的.首先看看九宫格完整的样子. 结构树是这样的.在结构树中,我们可以看到WViewColumn下面有九个WViewRow.WVi ...

随机推荐

  1. 【AMAD】django-formapi -- 一个DJANGO API框架，可使用签名request，可使用form作为API的验证工具

    动机 简介 个人评分 动机 如何快速构建API,使用view就行了? 如果快速构建一个可以验证参数的API,使用django-formapi1吧! 简介 class DivisionCall(call ...

  2. 【AMAD】django-cities -- 为Django项目提供国家，城市数据

    动机 简介 个人评分 动机 有时候看一些数据库设计,国家数据会存在一个单独的表里面.这种方式读取数据库无疑又要加上一层join,很不划算. 简介 [django-cities]1可用为你提供国家和城市 ...

  3. PHP学习（4）——数组的使用

    1.数组的概念 数组就是一个用来存储一系列变量值的命名区域. 每个数组元素有一个相关的索引(也成为关键字),它可以用来访问元素. PHP允许间隔性地使用数字或字符串作为数组的索引. 2.数字索引数组 ...

  4. smoothscroll

    smoothscroll是一款jQuery插件,可以平滑地滚动到指定的地方. 可以解决chrome锚点失效的问题. 官方网站 http://iamdustan.com/smoothscroll/ gi ...

  5. pycharm右键运行unittest、pytest文件

    在实际学习过程中,有时候会出现右键运行文件,但没有任何结果的情况.这就是没有使用unittest/pytest 的方式运行. 解决方法: 添加好

  6. 深入理解MySQL索引原理和实现——为什么索引可以加速查询？

    说到索引,很多人都知道“索引是一个排序的列表,在这个列表中存储着索引的值和包含这个值的数据所在行的物理地址,在数据十分庞大的时候,索引可以大大加快查询的速度,这是因为使用索引后可以不用扫描全表来定位某 ...

  7. KUDU数据导入尝试一：TextFile数据导入Hive,Hive数据导入KUDU

    背景 SQLSERVER数据库中单表数据几十亿,分区方案也已经无法查询出结果.故:采用导出功能,导出数据到Text文本(文本>40G)中. 因上原因,所以本次的实验样本为:[数据量:61w条,文 ...

  8. Java的四层结构dto、dao、service、controller

    首先,最底层的就是dto层,dto层就是所谓的model,dto中定义的是实体类,也就是.class文件,该文件中包含实体类的属性和对应属性的get.set方法:<bean> 其次,是da ...

  9. IDEA中便捷更新Git项目最新代码

    更新:IDEA中直接点击Gir后面的第一个图标 会出现一个这样的弹框,点击OK,就可以将GitLab中最新的代码更新到IDEA中(本地)

  10. Arthas查看Spring配置

    在开发过程经常有同学问:"我这个配置更新提交了,怎么样知道项目中是否已经更新使用新值?" 常用的方法是添加日志打印该值判断是否更新.今天我们用Arthas来实现项目中配置值实时读取 ...