微信小程序布局

一、小程序各个文件功能：
.js描述当前页面逻辑；.json描述当前页面配置; .wxml页面视图； .wxss页面样式
二、布局
小程序通过wxml和wxss实现页面布局
布局flex(弹性盒):

容器：
display:flex;
flex-direction:定义主轴的方向,row(默认值。灵活的项目将水平显示，正如一个行一样。),row-reverse(与 row 相同，但是以相反的顺序),column(灵活的项目将垂直显示，正如一个列一样。),column-reverse(与 column 相同，但是以相反的顺序),initial(设置该属性为它的默认值。请参阅 initial),inherit(从父元素继承该属性。请参阅 inherit。)；
flex-wrap:定义轴线的排列方式；属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。注意：如果元素不是弹性盒对象的元素，则 flex-wrap 属性不起作用。(nowrap:默认值。规定灵活的项目不拆行或不拆列。; wrap:规定灵活的项目在必要的时候拆行或拆列。wrap-reverse:规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。)
flex-flow：flex-direction和flex-wrap的缩写；
justify-content:主轴的对齐方式，值为flex-start , flex-end, center,space-between(两端对齐)，space-around(项目两侧的间隔相等)；(元素在主轴的对齐方式)
align-items:交叉轴的对齐方式，值为flex-start, flex-end, center, baseline(项目第一行文字的基线对齐)，stretch(默认值)；（元素在交叉轴的对齐方式）
align-content:定义多根轴线的对齐方式，项目只有一根轴线的话，该属性不起作用，值为 flex-start, flex-end, center, space-between,space-around, stretch

项目：
order:项目的排列顺序，值越小排在前面；
flex-grow:定义项目的放大比例，默认为0，如果存在剩余空间也不放大（值为1，等比例放大；如果一个为2，其他为1，则平分按照比例剩余空间的）；
flex-shrink：定义项目的缩小比例，默认为1（值为1，按照比例缩小；值为0，其他项目为1，则为0值的不缩小）；
flex-basics:定义在分配多余空间之前，项目占据主轴空间，默认值为auto,即本来的大小；
flex:是flex-grow, flex-shrink, flex-basics的缩小，默认为0 1 auto (auto:1 1 auto; none:0 0 auto)
align-self:定义元素自身的对齐方式(会重写掉align-items和 justify-content)

主轴：
交叉轴：
box-sizing:规定两个并排的带边框的框
相对定位和绝对定位：
相对定位的元素是相对自身进行定位，参照物是自己
绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位
三、demo截图

1）

screenShot.png

2）

demo截图2.png