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

Posted MR_CHW

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序UI设计-布局分解-FlexBox的align-content应用相关的知识,希望对你有一定的参考价值。

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设计-布局分解-FlexBox的align-content应用的主要内容,如果未能解决你的问题,请参考以下文章

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

flexbox子元素中的CSS可滚动内容

如何使用flexbox进行两列布局,并在列中的项目之间使用相同的间距? [重复]

类似 UI 的 NavigationBar 的 Flexbox

如何高效开发一款微信小程序

有哪些选项可以使用带有可调整大小和可排序元素的 flexbox 进行类似砌体的布局