flex项目属性演示

（1）order 项目排列的次序

1
2
3
1
order:3
2
order:1
3
order:2

（2）align-self 单个项目在交叉轴上的对齐方式

align-items： flex-start center flex-end baseline（所有项目的第一行文字的基线对齐） stretch（默认值，如果项目未设置hegiht或者为auto，占满整个交叉轴高度，5号未设置高度，可以观察一下5号的高度变化）

（1号）align-self： flex-start center flex-end auto（表示继承容器的align-items） stretch（如果未设置高度，拉伸占满交叉轴） baseline（它在align-self中似乎并没有作用）

1
2
3
4
5

（3）flex-grow 项目的放大比例

取值：数字。如果一行中所有项目的flex-grow属性相同，那么它们将平分剩余空间。默认为0，即存在剩余空间也不放大

flex-grow： 0（默认值） 1 2
flex-grow： 0（默认值） 1 2
flex-grow： 0（默认值） 1 2

1
2
3

（4）flex-shrink 项目的缩小比例

定义项目的缩小比例，默认为1，即：如果剩余空间不足，该项目将缩小。取值：如果所有项目的flex-shrink相同，当空间不足时，所有项目等比例缩小。如果一个项目的flex-shrink=0，则当空间不足时，该项目不缩小

flex-grow： 0 1（默认值） 5
flex-grow： 0 1（默认值） 5
flex-grow： 0 1（默认值） 5

1
2
3

（5）flex-basis 在分配多余空间之前，项目占据的主轴宽度。浏览器会根据这个属性计算主轴是否有多余空间。默认为auto，即项目原本的大小

（6）flex：flew-grow、flex-shrink、flex-basis三者（按先后顺序）的简写。建议优先使用 flex属性，而不是分开写三个属性

返回首页