flex深入理解

flex 属性是 flex-grow, flex-shrink, flex-basis 三个属性的缩写

flex有以下几种写法

• flex: auto;
• flex: none;
• flex: [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]

默认值

• flex-grow 的默认值是 0,表示不会争夺剩余空间，如果不为0，会根据这个数字所占所有flex-grow的总数比例来争夺剩余空间;

• flex-shrink 的默认值是1,表示会在剩余空间不足时进行收缩，如果为0，则在剩余空间不足时不收缩，收缩的空间比例按这个数字所占所有flex-shrink的比例来进行;

• flex-basis 的默认值是 auto, 表示固定的分配数量，如果flex-grow不为0，且flex-shrink为0，则会表示为最小占据空间，如果是100px，表示最小宽度100px，优先级高于width:100px

缩写

flex-basis在缩写属性时的默认值是0% flex-grow在缩写属性时的默认值是1

1个值

• flex: 0 表示 flex: 0 1 0% 子元素会占据最小内容宽度
• flex: none 表示 flex: 0 0 auto 子元素会占据最大内容宽度，不会换行
• flex: auto 表示 flex: 1 1 auto 尺寸不足时会优先最大化内容尺寸
• flex:1 表示 flex-grow:1，flex-shrink: 1, flex-basis: 0% 尺寸不足时会优先最小化内容尺寸
• flex:100px 表示flex-basis: 100px, flex-grow:1, flex-shrink: 1

2个值

• 第一个值表示flex-grow
• flex: 1 2 表示flex-grow: 1, flex-shrink: 2 , flex-basis: 0%
• flex: 1 100px 表示flex-grow: 1, flex-basis: 100px， flex-shrink: 0

3个值

长度值表示flex-basis，剩下两个值第一个表示flex-grow, 第二个表示flex-shrink

/* 下面两个意义一样 */
flex: 1 2 100px;
flex: 100px 1 2;

initial

• flex: initital 表示 flex: 0 1 auto，当仅设置display:flex时，子元素会被设置成flex:initial 意味着：该元素不会增长变大占据flex容器中额外的剩余空间(flex-grow:0),会收缩变小以适合容器(flex-shrink:1)，尺寸根据自身宽高属性进行调整(flex-basis:auto)

• flex:auto 等同于设置 flex: 1 1 auto

意味着：子项会增长变大占据flex容器中额外的剩余空间(flex-grow: 1)，会收缩变小以适合容器(flex-shrink:1)，尺寸根据自身宽高属性进行调整。