伸缩盒子模型控制的是父子关系
父元素：伸缩容器
子元素：伸缩项目
主轴：start-end
交叉轴（侧轴）
开启弹性盒子，必须在父元素中设置开启弹性布局
display: flex;
稍微低一点的版本需要加上前缀
display: -webkit-flex;
1、当不设置宽度的时候，内容撑开宽度
2、项目沿着主轴一次排列
3、高度默认撑满整个容器
1、当项目的宽度相加没有超过父级的宽度，那么项目不进行压缩
2、当项目的宽度现价超出父级的宽度，项目进行压缩，并且填满父级容器
一、flex容器 主轴方向flex-direction：
row/*row默认值：由左向右*/
row-reverse/*row-reverse:由右向左*/
column：主轴与侧轴发生对调/*colume:主轴由上向下*/
column-reverse/*column-reverse:主轴由下向上*/
flex容器 主轴方向布局方向老版本
-webkit-box-orient: horizontal;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-box-direction: normal;老版本如果要实现反向和反方向需要书写两个属性
二、富余空间管理（主轴）
justify-content：
flex-start /*默认 在主轴开始位置 一次排列*/
flex-end /*右对齐到主轴结束位置（不是反转）*/
center /*项目在主轴内居中*/
space-around：/*富裕空间包含项目*/
space-between：/*伸缩项目包含富裕空间*/
富余空间管理（主轴）老版本
-webkit-box-pack: start; --- 默认值：富裕空间在右边
-webkit-box-pack:end; --- 富裕空间在左边
-webkit-box-pack:center; --- 富裕空间包含伸缩项目的整体，使伸缩项目整体在中
三、富余空间管理（侧轴)
align-items：
flex-start/*侧轴上对齐*/
flex-end/*侧轴下对齐*/
baseline/*基线对齐*/
center/*侧轴居中*/
stretch/*默认撑满侧轴*/
富余空间管理（侧轴）老版本
-webkit-box-align：
start
end
center
四、弹性空间
flex-grow:1:
将富裕空间分配到项目上
-webkit-box-flex: 1;
例子：
.outer div:nth-child(1){
width: 20%;
/*justify-content: 只是控制富裕空间怎么排列，但是并没有把富裕空间分配给项目使用;*/
/*将富裕空间分配给这个项目*/
flex-grow: 1;
background-color: #4c71ff;
}
.outer div:nth-child(2){
width: 30%;
flex-grow: 2;
line-height: 100px;
background-color: #ce89ff;
}
五、新版本特有
/*项目超出父级宽度换行*/
flex-wrap: wrap;
/*超出父级的宽度就压缩，不换行*/
/*flex-wrap: nowrap;*/
/*超出父级的宽度 换行并改变侧轴的start和end的的位置*/
/*flex-wrap: wrap-reverse;*/
六、控制整体侧轴的富裕空间
/*开启弹性盒子*/
display: flex;
/*项目超出父级宽度换行*/
flex-wrap: wrap;
/*侧轴居中，只在当前项目所在的行居中*/
align-items: center;
/*控制项目整体打包在侧轴的排列*/
/*align-content: flex-start;*/
/*align-content: flex-end;*/
align-content: center;
/*冲突：
在项目换行后，侧轴的排列优先用align-content
在项目没有换行时，侧轴的排列优先用align-items*/
/*在主轴居中*/
justify-content: center;
七、flex-flow:;
flex-flow: wrap column; //换行、方向的合写样式
八、项目的排列顺序（flex项目）
order: 1;
order排序，把排序元素先单独拿出来，让剩余元素先正常排列，排完之后，order元素在其后边再进行顺序排列
order是沿着主轴方向进行排序的
九、项目自身侧轴的富裕空间（flex项目）
元素自身侧轴控制.png
每一个项目控制自身的侧轴
align-self: flex-start;
align-self: flex-end;
align-self: center;
案例：三个元素各自占一列
<style>
.outer{
width: 1000px;
height: 300px;
margin: 0 auto;
border:1px solid #000;
/*开启弹性盒子*/
display: flex;
}
.outer div:nth-child(1){
width: 50%;
background-color: #4c71ff;
align-self: flex-start;
}
.outer div:nth-child(2){
width: 30%;
background-color: #ce89ff;
align-self: center;
}
.outer div:nth-child(3){
width: 60%;
background-color: #ffaf8a;
align-self: flex-end;
}
</style>
</head>
<body>
<div class="outer">
<div>11</div>
<div>22</div>
<div>33</div>
</div>
</body>
十、收缩率（flex项目）
当伸缩项目设置宽度，比容器宽度还要大时，元素并没有发生溢出的情况，那此时就出现一个东西叫 收缩因子（收缩率）
flex-shrink:拉伸因子 0 ---不拉伸
flex-shrink:收缩因子 默认值：1 --- 收缩
十一、子元素的基准值
flex-basis：0
十二、等分布局,在父级开启了display:flex; 子元素设置flex：1；
方案1：
设置容器 flex新版本
设置项目：flex-basis：0；flex-grow：1；
方案2：
设置容器 flex老版本
设置项目：width:0；-webkit-box-flex:1;
方案3：
设置容器 flex新版本
设置项目：flex：1；
flex:
flex-basis,flex-grow,flex-shrink的缩写
例子：
flex:1 ;
flex-basis：0；
flex-grow：1；
flex-shrink:1;
