微信小程序页面布局的方式有哪些

　　微信小程序的页面开发是让不少人头疼的事情，因为小程序页面关系到用户对它的第一印象，所以创意很重要。现在开发小程序的同时也可以设置页面布局了，一起来看看微信小程序页面布局的方式吧。

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

　　< /view>

　　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伸缩容器为垂直，伸缩项目为从下到上

　　flex-wrap

　　微信小程序页面布局的方式有很多种，参照以上资料，传统型和伸缩型都有各自的利弊，关键看你自己怎么选择和开发了。更多相关资料请关注微信小程序素材网。

　　微信小程序导航布局技巧有哪些

　　微信小程序表格布局怎么弄

　　小程序开放转发按钮新能力，让小程序页面转发只要一步