微信小程序flex布局

布局基础

        

默认每个View进行垂直布局。每个view占据一行。

flex布局（设置display=flex）

        

         平面布局有一个主轴和交叉轴（类似于平面坐标中的X轴和 Y轴）

         默认X轴为主轴 Y轴为交叉轴

 

         flex容器属性：针对于容器内的容器

                   flex-direction排列方向

                            row(默认)         column

 

                   flex-wrap元素换行问题

                            nowrap（不换行）         wrap(换行)

                            wrap-reverse换行反转（多的一行在上面）

                   flex-flow上面两个的简写

                            先定义方向  再定义换行

 

                   justify-content主轴的对齐元素

                            center(沿主轴居中对齐)

                            flex-start（主轴左边、默认方式）      flex-end（主轴右边）

                            space-around（各个元素平分主轴空间）