微信小程序flex布局（容器属性）

一、理解flex容器与元素

    

二、flex容器属性

• flex-direction：决定元素的排列方向（即设置主轴），默认为row
• • flex-direction: column;

      

• flex-direction: row;

  

     

• flex-direction:row-reverse;

     

• flex-direction:column-reverse;

     

    

• flex-wrap：当元素一行排列不下时，决定元素如何换行，默认为nowrap
• • flex-wrap:nowrap;

     

• flex-wrap:wrap;

     

• flex-wrap:wrap-reverse;

     

     

• flex-flow：flex-direction与flex-wrap的简写

     

• justify-content：元素在主轴上的对齐方式.默认是flex-start
• • justify-content:center

     

• justify-content:flex-start

     

• justify-content:flex-end

     

• justify-content:space-around,容器中每个子元素的两端相等，子元素之间的间隔比子元素与边框的间隔大一倍。

     

• justify-content:space-between,容器中子元素两端对齐，子元素之间的间隔相等

     

• align-items：元素在交叉轴的对齐方式,默认为stretch
• • align-items:center;

      

• align-items:flex-start;

     

• align-items:flex-end;

     

• align-items:baseline;文字在同一水平线上

     

• align-items:stretch;如果项目未设置高度或设为auto，将占满整个容器的高度