微信线程序基本布局方法-flex布局记录

一、container 容器（容器内的元素简称为’项目’）

1、设置容器的属性display:flex

- flex-direction : row(默认值)

• row: 主轴横向，从左向右。
• row-reverse: row的反方向。
• column: 主轴纵向，方向从上指向下。
• column-reverse: column的反方向。

- flex-wrap属性（设置是否允许项目多行排列，以及排列时换行的方向）

• nowrap 不换行
• wrap 换行排列
• wrap-reverse: wrap的反方向

- justify-content属性（设置项目在主轴方向上对齐方式，以及分配项目之间及周围多余的空间）

• flex-start(默认值): 项目对齐主轴起点，项目间不留空隙。
• center: 项目在主轴上居中排列，项目间不留空隙。
• flex-end: 项目对齐主轴终点，项目间不留空隙。
• space-between: 项目间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0.
• space-around: 与space-between相似，不同点是，第一个项目离主轴起点和最后一个项目离主轴终点距离为中间项目间间距的一半。
• space-evenly: 项目间间距、第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距。

- align-items属性（设置项目在行中的对齐方式）

• stretch(默认值) ：项目拉伸至填满行高。
• flex-start: 项目顶部与行起点对齐。
• center: 项目在行中居中对齐。
• flex-end: 项目底部与行终点对齐。
• baseline: 项目与行的基线对齐。

- align-content属性（多行排列时，设置行在交叉轴方向上的对齐方式，以及分配行及其周围多余的空间。）

• stretch(默认值): 当未设置项目尺寸，将各行中的项目拉伸至填满˙交叉轴。当设置了项目尺寸，项目尺寸不变，项目行拉伸至填满交叉轴。
• center: 行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交叉轴终点距离相等。
• flex-end: 尾行在交叉轴终点开始排列，行间不留间距。
• space-between: 行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点的距离为0.
• space-around: 行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为行与行间距的一半。
• space-evenly: 行间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等。

二、 item项目属性 （设置项目，用于设置项目的尺寸，位置，以及对项目的对齐方式做特殊设置）

• order属性 — 设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前。属性值为整数。
• flex-shrink属性 —- 当项目在主轴方向上溢出时，通过设置项目收缩项目适应容器。属性值为项目的收缩因子，属性值取非负数。未设置该值则默认为1.
  ****需要注意的是，当项目的压缩因子相加小于1时，参与计算的溢出空间不等于完整的溢出空间。
• flex-grow属性 —— 当项目在主轴方向还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配。属性值为项目的扩张因子，属性值取非负数。
• flex-basis属性 —-当容器设置flex-direction为row或row-reverse时，flex-basis和width同时存在，flex-basis优先级高于width,也就是此时flex-basis代替项目的width属性。
  ****需注意：当flex-basis和width(或height)其中一个属性值为auto时，非auto的优先级跟高。
• flex属性—-是flex-grow, flex-shrink, flex-basis的简写方式。值设置为none,等价于 00 auto,值 为auto,等价于 1 1 auto.
• align-self 属性 —- 设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items，这么做可以对项目的对齐方式做特殊处理。默认值auto. 继承容器的align-items值，当容器没有设置align-items时，属性值为stretch.