伸缩布局
传统的布局方案，基于盒状模型，依赖display+position+float属性。它对于那些特殊布局非常不方便，
重要属性：
display:flex 如果一个容器设置了这个属性，那么这个盒子里面的所有直接元素都会自动变成伸缩项flex
justify-content:
设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
语法：justify-content:flex-start|flex-end|center|space-between|space-around
设置子元素的排列方式：调整内容
flex-start：从左到右排列
flex-end：从父容器右边到左边
center:让子元素从父元素的中间位置开始排列
space-between:左右与父容器的左右对齐，中间产生同等的间距
space-around:将多余的空间，平均的分在每个子元素的两边，类似magin + auto
伸缩盒子的属性flex-flow:
flex属性是flex-grow,flex-shrink,flex-basis的简写，默认值是0 1 auto。
语法：flex:[flex-grow][flex-shrink][flex-basis]大多数情况下没必要用这种方法，都使用flex缩写。
flex:[number]这个语法制定了一个数字，代表了这个伸缩项目该占用的剩余空间比例。
flex:auto 属性值设为suto的伸缩项目，会根据主轴自动伸缩以自用所有剩余空间。
=============================
等比扩张grow， 收缩比例shrink。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>扩张比例grow和 收缩比例shrink</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 600px;
border: 1px solid red;
margin: 0 auto;
/* 设置父容器为盒子，会使每一个子元素自动变成收缩项
当子元素的宽度和大于父容器宽度的适合，子元素会自动平均收缩。*/
display: flex;
/* 设置子元素的主轴方向上的排列方式 */
justify-content: space-around;
}
.first {
width: 200px;
height: 200px;
background-color: red;
/* flex-grow:扩展子元素的宽度, 类似安卓LinearLayout的layout_weight属性
设置当前元素应该占据剩余空间的比例值，默认值0 */
/* flex-grow: 1; */
/* flex-shrink:定义收缩比例（不够空间的分配比例），通过设置的值来计算收缩空间，默认值1。
空间不够，不够的那一部分。由每个子元素来平摊。
eg：
当值为1:0:0,就是第一个元素占据所有的收缩空间，最后div显示宽度分别为100-200-200。
当值为0:0:0,就都不做不够空间的分配，最后可能会溢出。
当值是2:1:1,div显示宽度是150-175-175
比例值计算：当前空间flex-shrink/所有兄弟元素的flex-shrink的和*/
flex-shrink: 2;
}
.second {
width: 200px;
height: 200px;
background-color: #006400;
/* flex-grow: 0; */
flex-shrink: 1;
}
.third {
width: 200px;
height: 200px;
background-color: yellow;
flex-shrink: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</body>
</html>
=======================
flex：1比4划分区域，类似使用百分比，划分div占用的宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex：1比4划分区域</title>
<style>
*{margin: 0;padding: 0;}
.box{
width: 100%;
height: 500px;
background-color: #CCCCCC;
margin: 0 auto;
/* 设置父容器为伸缩盒子 */
display: flex;
/* 设置子元素在主轴方向上排列方式 */
/* justify-content: flex-start; */
}
.left{
flex: 1;
background-color: yellowgreen;
}.right{
flex: 4;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>