1,父元素的属性:display: flex;
声明元素用flex渲染,flex-direction:
row ,row-reverse,colunm,column-reverse ,这是设置主轴的方向,也确定了fex-start flex-end 的方向。交叉轴的方向是主轴方向顺时针旋转90。
justify-content:
确定项目的主轴排列方向。其中space-between是项目与两边相切。
align-items
确定项目交叉轴的排序方向。值和justify-content一样,当只有一条轴的时候,该属性不起作用。
flex-wrap
确定项目是否换行。
2,项目属性;
flex:0 0 20%;
第一个是flex-grow
默认是0 ,在存在剩余空间下,不会“长大”。当所有都是1或者同一值的时候,等分,当有个2的时候,“长大”是1的两倍。
第二个flex-shrink
默认是1 ,即是缩放等同的比列。当为0的时候,不缩小。
以上数值可以理解是倍数。
第三个是flex-basis
默认auto,就是原来大小,该值可以是px,%,这是显示项目的大小
传送门