微信小程序 Flex布局

Flex布局基础

Flex container ：容器控件

item1,item2 ：Flex元素

main axis ：从左到右 主轴

cross axis ：从上到下 交叉轴（可以修改Flex container的属性，改变这个关系(从上到下为主轴，从左到右为交叉轴)）

display:flex;

-------------------------------------------------------------------------

Flex容器属性详解

flex-direction：决定元素的排列方向（也是决定主轴和交叉轴）

    (row：横向主轴)

                   

    (colum：纵向主轴)

                   

flex-wrap：决定元素如何换行（排列不下时）

    (wrap：从上到下换行)

                   

    (wrap-reverse：从下到上换行)

                   

flex-flow：flex-direction和flex-wrap的简写

    (flex-flow：row wrap)

justify-content：元素在主轴上的对齐方式

    (center：居中)

                   

    (flex-start：从左边开始对齐)

                   

    (flex-end：从右边开始对齐)

                   

    (space-around：每个元素在主轴上所占据的位置是一样的)

                   

    (space-between：元素在主轴上两端对齐，每个元素之间的距离相等)

                   

align-items 元素在交叉轴的对齐方式

    (flex-end：元素在交叉轴上的从下到上，或者从右到左)

                   

    (flex-start：元素在交叉轴上的从上到下，或者从左到右)

                   

    (center：在交叉轴的中间)

                   

    (stretch：当元素没有设置高度的时候，自动将元素占满容器的高度)

                   

    (baseline：让元素以元素里面的文字以机械式对齐)

                    

-------------------------------------------------------------------------

Flex items元素属性详解

flex-grow ：当有多余控件时候，元素的放大比例

   (默认值：0，等比放大)

                   

flex-shrik：当控件不足时，元素的缩小比例

   (默认值：1，等比缩小)    

                   

flex-basis：元素在主轴上占据的空间

                  
flex：grow,shrink,basis的简写

order：定义元素的排列顺序

                  

align-self：定义元素自身的对其方式