微信小程序 : flex布局

开启flex布局 : display : flex;

主轴方向

    flex-direction : 

        row : 横(默认)

        column : 竖

主轴对齐

    justify-content : 

        center : 居中
        flex-end : 尾部齐(右)
        flex-start : 头部齐(左)
        space-around : 元素之间间隔均分
        space-between : 两端对齐空间均分

交叉轴对齐

    align-items : 

        stretch : 子元素未设置高度,则同父元素高度
        baseline : 以容器内的文字为基线对齐

扫描二维码关注公众号，回复： 2384562 查看本文章

        其它属性同justify-content

元素换行

    flex-wrap : 

        nowrap : 不换行,缩小盒元素的主轴尺寸(默认)
        wrap : 必要的时候换行  

flex元素属性
      当有多余空间时,元素放大 : flex-grow
        0 : 不放大 (默认)
        1 : 占据一份多余空间
        ...
      当有多余空间时,元素缩小 : flex-shrink
        0 : 不缩小
        1 : 等比缩小 (默认)
        ...
        
      元素在主轴占据的空间 flex-basis
        
      放大缩小占据空间简写 : flex : 放大 缩小 占据空间;
      
      元素的排列顺序 : order
        0 : (默认)
      
      元素自身的排列方式 : align-self
        属性同justify-content