flex布局容易忽略的角色作用
目录
清除浮动
作用于行内元素
flex-basis宽度
案例一：
案例二：
案例三：
flex-grow设置权重
案例一：
案例二：
简写flex-grow:1 0 auto;
flex作为一维布局,行和列的使用，忽略的小角色，大作用。
清除浮动
父元素display:flex; 子元素的float:left;无效。
<div class="wrap"><div class="item">首页0</div><div class="item"><span>内容很长</span><span>helloWorld</span></div><div class="item">首页2</div></div>.wrap {width:562px;background-color: #999;display: flex;
}
.item{float: left;background-color:aquamarine;color:blueviolet;border: 1px solid #999;margin: 20px;
} 
作用于行内元素
第二个item下面有两个行内元素span,在父元素item中更改期布局。
.item:nth-child(2){
display: inline-flex;
flex-direction: column;
text-align:center;
}
.wrap {width:562px;background-color: #999;display: flex;
}
.item{float: left;background-color:aquamarine;color:blueviolet;border: 1px solid #999;margin: 20px;
}
.item:nth-child(2){display: inline-flex;flex-direction: column;
}
flex-basis宽度
在使用flex布局之中，flex-basis不是auto的情况下，等同于width；
flex-grow的值用来定义每个子元素的比例权重值。
案例一：
flex-basis和width同时存在的话，flex-basis有number值，优先级高于width
<div class="wrap"><div class="item flex1">flex1 text Hello world</div><div class="item flex2">flex2 text Hello world</div><div class="item flex3">flex3 text Hello world</div><div class="item flex4">flex4 text Hello world</div><div class="item flex5">flex5 text Hello world</div><div class="item flex6">flex6 text Hello world</div>
</div><style>
.wrap {width:100%;height: 200px;display: flex;
}
.item {flex-basis: 100px;// 这时的width的值无效，flex-basis优先级高于width的值width: 10;border: 1px solid #999;background-color:aqua;font-size: 16px;font-family: bold;
}
</style>
案例二：
flex-basis值为auto时，大小跟随width的值
.item {flex-basis: auto;// 这时flex-basis的值为auto,值跟随width的值width:80px;border: 1px solid #999;background-color:aqua;font-size: 16px;font-family: bold;
} 
案例三：
内容有空格不会换行展示，flex-basis配合white-space:nowrap;使用。
flex-basis:0;
white-space:nowrap;
.item {flex-basis: 0;white-space: nowrap;width: 90px;border: 1px solid #999;background-color:aqua;font-size: 16px;font-family: bold;
}- 默认是auto,跟随内容的大小来适应，如果这时设置了width，则等于width的值；
- 不为auto，例如'100px',这时的width值无效，在使用flex布局情况下，flex-basis优先级高于width;
- 为0时，子元素的宽度跟随width的值;如果内容有空格，会换行展示；
- flex-basis:0;white-space:nowrap; 宽度跟随width的值，内容如果有空格，使用white-space:nowrap; 不会换行；
flex-grow设置权重
1：剩余空间：父元素的总宽度减去子元素宽度之和
2：权重比例值：所有子元素flex-grow之和 > 1 ? 1 : 所有子元素flex-grow之和
3：可以分配的剩余空间 = 剩余空间*权重比例值
4：可以分配的剩余空间 * 单个子元素权重之和/所有子元素权重之和
案例一：
在父元素宽度没有撑满的情况下，使用flex-grow比重属性，用来占满父元素多余的空间。
.item {flex-basis: 14%;flex-grow:0.2;width:10px;border: 1px solid #999;background-color:aqua;font-size: 16px;font-family: bold;
}
.flex2 {flex-grow: 3;background-color:blue;
}
案例二：
之前写布局的时候，经常使用的布局方式如下，然后在子元素设置width:100%;
.wrap {width:562px;background-color: #999;display: flex;justify-content: space-around;
}
.item{width:100%;text-align:center;background-color:aquamarine;color:blueviolet;border: 1px solid #999;
}
子元素使用flex-grow:1；flex-grow:1;也可以达到同样的效果
.wrap {width:562px;background-color: #999;display: flex;
}
.item{flex-grow:1;text-align:center;background-color:aquamarine;color:blueviolet;border: 1px solid #999;
}
简写flex-grow:1 0 auto;
flex-grow:1;
flex-shrink: 0;
flex-basis: auto;
.wrap {width:562px;background-color: #999;display: flex;
}
.item{flex: 1 0 auto;text-align:center;background-color:aquamarine;color:blueviolet;border: 1px solid #999;
}