小程序UI设计(7)-布局分解-左-上下结构

FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解

 
左边结构树中WViewRow下面有两个WViewColumn。WViewRow是横向排列,WViewColumn是纵向排列。第一个WViewColumn中放一个图片,第二个放两张图片。如下图展开的结构树。
 
下面针对第二个WViewColumn中有两个图片的FlexBox进行分解讲解。
 
flex-direction=column说明内部组件主轴x是从上而下。
flex-wrap在本工具中对于column类型的不起作用。此处请注意,由于使用中column这种方式是旋转了坐标系,所以实际设计时也容易小迷糊。建议大家尽量避免使用column。
justify-content=space-between决定了两个图片间隔和在WViewColumn中的位置。这个属性决定第一个元素对齐顶端,最后一个元素对齐底部,中间有间隔。如果有5个图片的话,第一个和第五个会紧靠上下。每个图片的间隔是view的高度减去5个图片高度和再除以4。数学不好的同学可以实际操作一下,在一个WViewColumn中拖入多个图片,然后变幻justify-content属性看看效果。
align-items=flex-start决定了在副轴y的排列方式是从原点出发。由于此view是column旋转了坐标系,此处可能理解有点小迷糊,我在这里语言也不好描述。大家可以实际拖入组件,变幻属性看看实际效果。
align-content属性暂不多解释,在下个帖子中详细解释一下。此例子中不影响布局。

时间: 2024-10-11 22:13:54

小程序UI设计(7)-布局分解-左-上下结构的相关文章

《基于 Bootstrap 的小程序UI设计框架》 一 CSS 通用样式

版式 标题 H1 到 H6 标题标签进行的优化.这里将不针对标签而是标题类 .H1 到 .H6.小程序仅识别 VIEW 标签. 重设上下边界为固定值,默认为一个行高距离,优化后统一为上 20 像素.下为 10 像素,h4 到 h6 距离顶部为 10 像素且不分标题级别,全部统一样式 固定所有标题行高为 1.1,避免行高因标题字体大小而变化,同时也避免不同级别标题行高不一致,影响版式风格统一 固定不同级别标题字体大小,依次为 36px 30px 24px 18px 14px 12px.这里将像素单

小程序UI设计(8)-布局分解-FlexBox的align-content应用

FlexBox的align-content到底是什么鬼,我也搞了好半天才开发出来,目前工具中WViewRow组件使用了此属性,WViewColumn中此属性不起作用.下图是justify-content.align-items和align-content属性组合使用的两个例子,请仔细理解一下. 大家看出来区别了吗,第一个整体右侧排列(justify-content=flex-end),第一行和第二行短黄和短红所在行上对齐(align-items=flex-start).第二个整体左对齐,第一行和

小程序UI设计(6)-布局分解-九宫格

今天我们来个庖丁解牛.对于一个完整的组合组件,看看通过工具是如何轻松完成的.首先看看九宫格完整的样子. 结构树是这样的.在结构树中,我们可以看到WViewColumn下面有九个WViewRow.WViewColumn之上的我们可以不用管,这些是画布上的内容,为了辅助设计用的.9个WViewRow是九宫格中的实际元素item. 每个item中图片和文字上下排列,九个item换行排列.那么这些是怎么做到的呢,当然是FlexBox的作用.下面详细介绍FlexBox属性对布局的影响.首先来介绍item的

小程序开发之页面布局

Flex布局又称弹性布局,在小程序开发中比较适用.因此将Flex布局相关属性整理如下,搞清楚了这个布局,小程序开发的页面布局就不在话下了. 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C提出了一种新的方案--Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现

iView Weapp微信小程序UI组件库中i-input的使用

iView Weapp微信小程序UI组件库为小程序的开发提供了良好的交互界面,组件库自定义了一系列组件,具有较强的开发友好性,但一些组件与微信小程序原生组件的使用方式有差异. i-input组件是该框架自定义的输入框组件,与微信中input具有相同功能. 在使用i-input输入值时,可以增加其bind:change="myInput" 属性,如: wxml: <i-input type="number" right  maxlength="2&qu

从零开发一款自己的小程序UI组件库(二)

写在前面:从零开发一款自己的小程序UI组件库(一) 上节我们讲到初始化组件库模板.模板文件概述.模板上传npm以及npm包文件下载至本地并运用到项目.这节我们继续,内容主要有基础UI组件库的搭建(button组件的实例)以及如何在本地使用npm link调试npm包项目. 本节所用到的物料:mineui-weapp组件库v1.1.weapp-for-mineui程序v1.1 1.开发基础组件button 我们上节有提到,要开发组件库的话,需要在官方单组件模板的基础上,①修改tools目录下的co

微信小程序:原生热布局终将改变世界

最近朋友圈已经被微信小程序刷屏了,这也难怪,腾讯的产品拥有广泛的影响力,谁便推出个东西,都会有很多人认为会改变世界,这不,张小龙刚一发布微信小程序的消息,很多人(技术的和非技术的)就跟打了鸡血似的,估计现在已经鸡血告急了! 我也看了网上的一些关于微信小程序的文章,估计那帮家伙连微信小程序是什么都没搞清楚,就在那里一本正经地胡说八道.好吧,我就通过本文让大家了解一些什么是微信小程序,以及微信小程序到底能为我们带来什么. 关于微信小程序的误解和讨论已经太多了.这里就说一些主要的. 1.  微信小程序

微信小程序UI组件、开发框架、实用库

UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wemark ★85 - 微信小程序Markdown渲染库 WeZRender ★36 - 微信小程序Canvas增强组件 wetoast ★21 - 仿照微信小程序提供的showToast功能 wxapp-charts ★20 - 微信小程序图表charts组件 WeiXinProject ★18 - 列

微信小程序直播系统开发框架布局

使用布局页面 ASP.NET Web Pages - 页面布局 在之前的内容中,您已看到在多个网页中引用相同的内容是很简单的. 创建一致外观的另一种方法是使用布局网页.布局网页包含网页的结构,而不是内容.当网页(内容页)链接到布局页时,它会根据布局页(模板)来显示. 布局页类似普通的网页,但是会在引用内容页的位置调用 @RenderBody() 方法. 每个内容页必须以 Layout 指令开头. 在代码中是这样的: 布局网页: <html> <body> <p>This