微信小程序界面布局如何做?微信小程序的页面布局该如何处理?

　　微信如今不管是各个行业还是我们的爸爸妈妈，大叔大婶都在使用着，而对于大公司大企业来说，微信是一个很好招揽客源的地方，于是很多公司企业商家都开始入驻微信，近期微信推出了小程序的功能，功能强大，下面随小编来看看关于微信小程序的页面布局该如何处理吧!

　　微信小程序使用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代码为:

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　wxss代码为

　　.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伸缩容器为垂直方向，伸缩项目的排版方式为从上到下

　　5)column-reverse伸缩容器为垂直，伸缩项目为从下到上

　　以上就是今天的微信小程序的页面布局该如何处理的全部的内容啦!大家看明白了吗?阅读完本篇文章后大家对微信小程序的页面布局该如何处理应该很清楚的了解了吧!希望微微风的文章能够给大家带来一些帮助。