Flex 属性演示

Flex 成员样式【flex items】

1

2

3

4

5

flex-grow ( 项目的放大比例，默认为0，即如果存在剩余空间，也不放大 )

elemento 1: elemento 2: elemento 3: elemento 4: elemento 5:

1

2

3

4

5

flex-shrink ( 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 )

elemento 1: elemento 2: elemento 3: elemento 4: elemento 5:

1

2

3

4

5

flex ( 项目多个属性的缩写模式 )

.item { flex: flex-grow [flex-shrink] [flex-basis]; }

elemento 1	elemento 2
flex-basis %	flex-basis %
flex-grow	flex-grow
flex-shrink	flex-shrink

1

2

order ( 项目的排列顺序。数值越小，排列越靠前，默认为0 )

elemento 1: elemento 2: elemento 3: elemento 4: elemento 5:

1

2

3

4

5