你不知道的flex布局 css3 flex 基础

ie6混杂模式的盒模型:
css2 的boxwidth = width = border * 2 + padding *2
ie6 的boxWidth = width; contentWidth = width - border *2 - padding * 2
使用ie6混杂模型(怪异模型)  box-sizing: border-box
ie6的解决问题: 在定宽的盒子里面,放一个100%的input的框,因为input自带2px的border,会超出父级宽度
overflow: 在overflow-x 或者overflow-y 只要一个方向设置了一个值不是visible,另一个方向的值就会变成auto
resize: 可以改变水平或者垂直的框的大小, 一般与overflow 一起使用
flex布局: 弹性盒子  display: flex 都是设置在父级盒子里面
flex-direction :盒子的主轴方向(默认row),有 row(自左向右) column(自上向下) row-reverse(自右向左) column-reverse(自下向上)
flex-wrap: 盒子是否换行(默认no-wrap), 有wrap (换行) no-wrap(不换行) wrap-reverse(倒着换行)
justify-content: 基于主轴的对齐方式(默认 flex-start) 有flex-start (默认对齐) flex-end(向右对齐) center(居中) space-between(两边对齐,中间自适应) space-around(元素两边的空隙相等)
align-items:基于垂直轴(交叉轴)的对齐方式,主要对于单行进行处理 (默认 stretch) stretch(没有设置高度,自动撑开到父级的高度) flex-start(开始位置) flex-end(最后的位置) center(居中)  baseline(文字底线对齐)
align-content: 基于垂直的对齐方式,主要用于多行元素进行对齐 (默认 stretch) 有 stretch(没有设置高度,自动撑开到父级的高度) flex-start(其实方向连续对齐)  flex-end(末尾对齐,没有缝隙)  center(中间) space-bewteen(上下占领,中间平局分配) space-around(所有元素平均分配距离)
flex单行对齐方式: align-items: center, justify-content: center
flex多行对齐方式: align-content: center
flex 设置到子级的属性
order: 谁小谁在前面,默认值为(0) 一般填写负值
align-self: 子项设置自己的垂直排列方式, 高于父级设置的 有stretch(没有设置高度,自动撑开到父级的高度) flex-start(开始位置) flex-end(最后的位置) center(居中)  baseline(文字底线对齐)
注意; 优先级align-content > align-self > align-items,
// 弹性盒子的弹性: 子项中填写 flex: 1 1 auto 三个参数如下面三个， flex-grow flex-shrink flex-basis
flex-grow: 伸 默认(0) 当以一行还有剩余空间,按照子项设置的flex-grow的值的比列来瓜分剩余的空间
flex-shrink: 默认（1）缩 每个元素的宽度相等时候, 当一行空间不足时候,启动缩,按flex-shrink 里面的值的比列来缩 , 宽度不相同时候,压缩算法: 
1.先计算所有盒子的加权值(每个盒子的宽度 * 需要压缩的比列 的和)
2.求每个盒子需要压缩的值, (每个盒子的宽度 * 需要压缩的比列 / 加权值 ) * 需要压缩的大小 得出的就是需要压缩的大小
flex-basis:默认auto,使用width   用来取代width,
flex-shrink： 在压缩中不管有没有设置boder-sizing:boder-box,里面的宽度是内容区的真实宽度，padding 或者border是不能被压缩的
flex-basis 与 width 的关系与区别： 
1.不设置width,而设置flex-basis的话，代表元素的最小宽度值就是flex-basis里面设置的值
2.设置了width, flex-width两者都且width 的值大于 flex-basis的值 的话，flex-basis为撑开的最小宽度，width里面的值为可以撑开的最大上限
3.如果英文不换行，撑开容器不会参与压缩，使用word-break: wrap
inline-flex: 行级弹性盒子,不怎么使用
flex的应用：
1.居中方式： 父级设置display：flex ，水平居中：justify-content: center, align-items: center, 无论盒子怎么移动，都会居中
2. 可动态添加的导航栏，
3.等分布局 写几个div, 父级flex布局， 子项felx-grow: 1
4.流式布局 align-content: flex-start
5.圣杯布局