小程序中怎么使用视图内部组件来进行页面的排版功能

介绍

小编给大家分享一下小程序中怎么使用视图内部组件来进行页面的排版功能,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

<强>涉及知识点:

<强> 1,垂直排列,水平排列

<强> 2,居中对齐

<强>示例:

<强> 1,默认排版,一个父组件里面两个子视图

小程序中怎么使用视图内部组件来进行页面的排版功能

显示效果:

小程序中怎么使用视图内部组件来进行页面的排版功能

<强> 2,先给父视图设置一个高度和颜色值,用于看效果

小程序中怎么使用视图内部组件来进行页面的排版功能

小程序中怎么使用视图内部组件来进行页面的排版功能

小程序中怎么使用视图内部组件来进行页面的排版功能

<强> 3,实现水平排列和垂直排列的样式,

水平排列:

小程序中怎么使用视图内部组件来进行页面的排版功能”>,- - - - - -在<img src=

垂直排列(不进行设置,默认垂直排列):

小程序中怎么使用视图内部组件来进行页面的排版功能“> - - - - - -在<img src=

<强> 4,实现居中效果

居中效果分为两种情况,依赖于3中的水平排列还是垂直排列。

①,当水平排列的时候,,justify-content:中心;决定水平居中

小程序中怎么使用视图内部组件来进行页面的排版功能“> - - - - - - - - - - - - - - - - - - - - - - - -在<img src=

②,当水平排列的时候,对齐项目:中心;决定垂直居中

小程序中怎么使用视图内部组件来进行页面的排版功能”>,- - - - - - - - - - - - - - - - - - - - - - - -在<img src=

③,当垂直排列的时候,justify-content:中心;决定垂直居中

小程序中怎么使用视图内部组件来进行页面的排版功能“> - - - - - - - - - - - - - - - - - - - - - - - -在<img src=

④,当垂直排列的时候,对齐项目:中心;,决定水平居中

小程序中怎么使用视图内部组件来进行页面的排版功能“> - - - - - - - - - - - - - - - - - - - - - - - -在<img src=

⑤,当对齐项目:中心;和justify-content:中心;都存在的时候,不管父视图怎么设置的排列方向,他的子视图都是水平垂直都居中

小程序中怎么使用视图内部组件来进行页面的排版功能“> - - - - - - - - - - - - - - - - - - - - - - - -在<img src=

看完了这篇文章,相信你对“小程序中怎么使用视图内部组件来进行页面的排版功能”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!

小程序中怎么使用视图内部组件来进行页面的排版功能