display:flex实现一端固定，另一端宽度自适应

1，text-align属性具有继承性，外部div内嵌div时，外部text-align失效，而内部div继承了外部的text-align;则内部div只好使用margin:auto来实现水平居中；

2，当某个元素（比如div)使用inline-block的时候，如果内部含有元素（比如含有p,h1,img)，则这个元素（div)会向下移。解决方法，在设置了inline-block的元素上添加属性：vertical-align:middle;

3，一个元素内部有三个元素，希望其中一个元素宽度固定为80px，另一个宽度是父元素的20%，最后一个元素占据剩余的空间：

   .father{

          display:flex;

}

 .son1{

 width:80px;

}

.son2{

width:20%;

}

.son3{

flex-grow:1;   //项目的放大比例，值为0时，即使存在剩余空间也不放大；为1，则放大；

}