学习笔记-微信小程序的布局基础

-flex布局的属性

1.    flex-direction 决定了元素的排列方向

        

        row：水平排列，colum：垂直排列

2.    flex-wrap 决定了元素如何换行

        

        有意思的是，wrap-reverse:可以颠倒上下的布局，把顶部的元素对称的放在底部

3.    flex-flow 是flex-direction和flex-wrap的缩写

        

flex-flow: row wrap;

4.    justify-content 元素在direction指示方向上的对齐操作

        

        center：在轴上居中，flex-start:从轴的最左边开始排列（默认），flex-end：从轴的最右边开始排列

        space-around：每个元素在主轴上平分左右的空余空间（平分的效果，边缘元素不贴壁），space-between：每个元素在主轴上平分空余空间（边缘元素贴壁）

5.    align-items 元素在垂直于direction指示方向上的对齐操作

        

        flex-start:居于交叉轴顶部（默认）,flex-end：居于交叉轴底部，cente：居于中间

       有意思的是，当使用stretch时，如果不指定高和宽，那么元素会主动占满整个容器；当使用baseline时，对齐的标准不是元素了，而是元素的文字。

6.    flex-grow 当有多余的元素时，元素的放大比例

        默认值为0，设为1的时候元素会填充掉整个剩余空间，或者让某个元素占相应比例的空间

7.    flex-shrink 当空间不足时，元素的缩小比例

        默认值为1，可以设置某一元素的值为0，使其不被压缩

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

9.    flex 是grow、shrink、basis的缩写

10.  order 定义元素的排列顺序

11.  align-self 定义元素自身的对齐方式

        

        令某一元素脱离所在的容器标定的align-items效果，自己决定自己的效果