微信小程序display(二) flex布局笔记

一、Flex(弹性布局)
dispaly:flex;(必须)
1.主要容器属性（用于布局）
（1）flex-direction：row || row-reverse || column || column-reverse
row:容器内的子项目从左到右横着排列
row-reverse:容器内的子项目从右到左横着排列
column:容器内的子项目从上到下纵着排列
column-reverse:容器内的子项目从下到上纵着排列
（2）flex-wrap: nowrap || wrap || wrap-reverse
nowrap:容器内的子项目不换行
wrap:容器内的子项目换行，第一行排满自动换到下一行（从左往右）
wrap-reverse:容器内的子项目从容器底部开始排列，行满子项目自动向上换行（从左往右）
（3）flex-flow: row nowrap || row wrap || column nowrap …
该属性是flex-direction和flex-wrap的结合,按自己的需求来组合。
（4） justify-content: flex-start || flex-end || center || space-between || space-around
假设交叉轴从左往右
flex-start:左对齐；
flex-end:右对齐；
center:居中对齐；
space-between:两端对齐，子项目之间的距离相同
sapce-around:每个子项目的左右距离相等（注意between和around之间的区别，between的子项目之间距离相同，around的子项目之间距离不同）
（5） align-items: flex-start || flex-end || center || baseline || stretch
假设交叉轴从上往下
flex-start:起点对齐
flex-end:终点对齐
center:中点对齐
baseline:以子项目的第一行文字为基线对齐
stretch:若子项目未设置高度，将闸门，将占满整个屏幕的高度。
（6）align-content: flex-start || flex-end || center || sapce-between || space-around || stretch
**! 注意：**如果该属性只有一根轴线，则该属性不起作用。
解决：需要设置flex-wrap:…
flex-start:起点对齐
flex-end:终点对齐
center:中点对齐
space-between:两端对齐，子项目之间的距离相同
sapce-around: 每个子项目的左右距离相同
stretch:占满整个屏幕
2.子项目的属性
（1）order:数值;
该属性定义子项目的排列顺序，默认为0.数值越小排列越靠前。可以使负值。
（2）flex-grow: 数值;
该属性定义子项目的放大比例，默认为0（即使有剩余空间也不放大）。
如果所有子项目设置为1，则所有子项目等分剩余空间。
如果其中一个子项目设置为2，则该子项目放大的比别的子项目大一倍。
（3）flex-shrink:数值；
该属性定义子项目缩小比例，默认为1（即剩余空间不足时，所有子项目同时缩小）
如果其中一个子项目设置为0，若剩余空间不足，该子项目不会缩小，而是别的子项目缩小。
（4） flex-basis:400px || auto
该属性定义在分配多余空间之前，项目占据的主轴空间，默认为auto,浏览器根据此属性检查主轴是否有多余空间。
当一个子项目的值设置为400px时，若剩余空间充足，则该子项目的固定宽为400px。若剩余空间不足，则该子项目与别的子项目同比缩小。
（5） flex:0 1 auto;
该属性是flex-grow，flex-shrink和flex-basis的组合，默认0 1 auto
可以用 flex:auto; 代替 flex: 1 1 auto;；
可以用 flex: none;代替 flex: 0 0 auto；
（6）align-self: auto | flex-start | flex-end | center | baseline | stretch;
该属性与align-items属性一致。