微信小程序页面排版怎么布局?

时间：2023-07-01 14:05 阅读数：92 人阅读分类：知识百科

　　微信小程序页面排版怎么布局?各位微信小程序开发者们，您想让你的微信小程序的页面排版更好看吗?接下来小编教大家微信小程序页面排版怎么布局哦，有需要的亲们就快来看看吧!

　　微信小程序页面排版怎么布局?

　　微信小程序使用flexbox容器，flexbox布局由伸缩容器和伸缩项目组成。任何一个元素都可以指定为flexbox布局，其中设为display:flex或者display:inline-flex的元素称为伸缩容器。伸缩容器的子元素称为伸缩项目，伸缩项目使用伸缩布局模型来排版。伸缩布局模型与传统的布局不一样，它按照伸缩流的方向布局。请看下面的经典小程序图片:

　　默认情况下，伸缩容器由两根轴组成，主轴(main)和交叉轴(cross)，其中主轴的开始位置叫main start，结束位置叫main end。交叉轴的开始位置叫cross start，结束位置叫cross end 。

　　伸缩项目的主轴上的占据空间叫main axis，在交叉轴上的占据位置叫cross axis，根据设置情况的不同。主轴既可以是水平轴，也可以是垂直轴。

　　不论哪个轴作为主轴，默认情况下伸缩项目总是沿着主轴，从主轴开始位置到主轴结束位置进行排版，flexbox在浏览器使用需要加上各个浏览器的私有前缀,-webkit ,-moz,-ms,-o，微信小程序全部去掉前缀。

　　伸缩容器支持的属*有：

　　1,display

　　2,flex-direction

　　3,flex-wrap

　　4,flex-flow

　　5,justify-content

　　6,align-items

　　7,align-content

　　8,order

　　9,flex-grow

　　10,flex-basis

　　11,flex

　　12,align-self

　　主要介绍这几个属*

　　display

　　该属*用来指定元素是否为伸缩容器，语法为

　　display:flex | display:inline-flex

　　wxml微信小程序代码为:

　　.container{

　　display: flex;

　　}

　　flex:用于产生块级伸缩容器

　　.container{

　　display: inline-flex;

　　}

　　inline-flex:用于产生行内级伸缩容器，　　

　　flex-direction

　　该属*用于指定主轴方向，微信小程序语法为

　　flex-direction: row | row-reverse | column | column-reverse

　　1)row水平方向从左向右

　　2)row-reverse水平方向从右向左

　　4)column伸缩容器为垂直方向，伸缩项目的排版方式为从上到下

　　各位亲们，以上就是微信小程序页面排版布局的开发内容了哦，希望小编的方法可以对您进行微信小程序页面排版有帮助哦，大家请多多的关注微小乔哦。感谢大家对本网的关注和支持哦。