微信小程序学习--基础--盒子模型Flexbox

主要包括 Flex 容器属性和 Flex 项目属性

Flex 容器属性

    flex-direction:项目元素排列的方向

    row：项目从左向右排列

    row-reverse：项目从右向左排列

    column：纵向对齐排列，从上到下

    column-reverse：反转纵向对齐排列，从下到上

flex-wrap:项目元素排列的方式

    nowrap：项目元素不会溢出，也不会自动换行

    wrap：项目元素超出宽度时，自动换行

    wrap-reverse：反转自动换行，相当于wrap是往下换行，wrap-reverse是向上换行

justify-content：定义了项目在主轴上的对齐方式

    flex-start：项目从主轴的开始（左侧）开始对齐

    flex-end：项目从主轴的结束（右侧）开始对齐，顺序仍然是从左到右abc

    center：项目从主轴的中心开始对齐

    space-between：各项目之间保持相同的距离排布

    space-around：同上，并且会在两边留有距离

align-items：项目交叉轴的方式

    这个比较难解释，具体看这个align-items演示

    flex-end

    center

    baseline

    stretch

align-content：多行项目排列方式

    flex-start：第二行紧靠第一行进行排布

    flex-end：同上，不过从下面位置开始堆叠

    flex-center：同上，从中间开始堆叠

    space-between：各行在两侧进行分布

    space-around：同上，并且上下留有距离

    stretch：各行平均分配所有的剩余空间

Flex 项目属性

    order：定义项目的排列顺序，值越小，排列越靠前

    flex-grow：项目的放大比例，默认为0

    flex-shrink：项目的缩小比例

    flex-basis：项目在主轴上的空间，可以设置为 **px

    align-self：项目自己的对齐方式