微信小程序成长记录(一)

1.flex-direction:用来规定flex项目在轴方向上面排列的顺序。

  row,从左往右排列  

  row-reverse,从右往左排序  

  column,从上往下排序

  column-reverse,从下往上排序

2.flex-wrap:决定项目是否多行显示的属性

  nowrap,一行显示不换行  

  wrap,多行显示  

  wrap-reverse,多行显示,但是跟规定排列方向相反

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

  eg:flex-flow:row wrap;

4.justify-content:用于在主轴上对齐伸缩的项目属性(横向)

  flex-start(默认值),左对齐。

  flex-end,右对齐。

  center,居中对齐。

  space-between,最左边左对齐,最右边右对齐,中间平均分配。

  space-around,平均分布在一行里,两端会保留空间。

5.align-content:纵向

  flex-start(默认值),上对齐。

  flex-end,下对齐。 

  center,居中对齐。

  space-between,上下两边对齐,中间平均分配。

  space-around,平均分布在一行里,两端会保留空间。

  baseline,第一行文字的基线对齐

  stretch,扩大占据剩下的空间

6.align-items,所有项目对齐

7.align-self,单独项目对齐

8.display: flex;弹性布局  display: inline-flex;行内元素Flex布局  display: -webkit-flex;Webkit内核的浏览器,必须加上-webkit前缀

9.order:项目的排列顺序,数值越小,排列越靠前。

10.flex-grow:项目的放大比例,默认为0

11.flex-shrink:项目的缩小比例,默认为1

12.flex-basis:项目占据的主轴空间,默认值为auto,即项目的本来大小。

13. flex:默认值为0 1 auto,该属性有两个快捷值:auto (1 1 auto)(根据剩余空间调整) 和 none (0 0 auto)(不发生变化)。

posted @ 2018-09-21 15:52  YuFly  阅读(821)  评论(0编辑  收藏  举报