CSS flex布局二 （flex:1学习笔记）

flex是flex-grow、flex-shrink、flex-basis的缩写组合。所以flex的默认值为上面三个属性值的组合。

.item{ flex:0 1 auto; }
.item{
	flex-grow:0;
	flex-shrink:1;
	flex-basis:auto;
}

• 当flex取值为none,则计算值为0 0 auto

.item{ flex:none; }
.item{
   flex-grow:0;
   flex-shrink:0;
   flex-basis:auto;
}

• 当flex取值为auto,则计算值为1 1 auto

.item{ flex:auto; }
.item{
  flex-grow:1;
  flex-shrink:1;
  flex-basis:auto;
}

• 当flex取值为一个非负数字，则该数字为flex-grow值，flex-shrink取 1，flex-basis取 0%

.item{ flex:2; }
.item{
	flex-grow:2;
	flex-shrink:1;
	flex-basis:0%;
}

• 当flex取值为一个长度或百分比，则视为flex-basis值，flex-grow取 1，flex-shrink取 1（注意 0% 是一个百分比而不是一个非负数字）

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

• 当flex取值为两个非负数字，则分别视为flex-grow和flex-shrink的值，flex-basis取 0%

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

• 当flex取值为一个非负数字和一个长度或百分比，则分别视为flex-grow和flex-basis的值，flex-shrink取 1

.item {flex: 2 24px;}
.item {
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: 24px;
}

关于flex-basis还没有看懂，以后再深入看，O(∩_∩)O哈哈~
注：flex-grow、flex-shrink、flex-basis详解见 https://blog.csdn.net/Bambi12/article/details/88643746
参考文档：
https://blog.csdn.net/fengyjch/article/details/79047908