上一篇博客提到fit-content可以自适应宽度，但是这个属性只能在Chrome浏览器上使用，在Firefox上需要加上-moz-前缀。不能在IE浏览器上兼容，
通过研究发现，width:auto;可以代替这个属性，但是需要在最外层的父元素上面加上属性display:flex;
下图是我的盒子结构，我想让两个子盒子的宽度自适应屏幕的大小，并且一直在页面居中显示，但这两个盒子始终都是互相左对齐的：
下面是我的代码：
.grandfather{
display: flex !important;
}
.father{
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
width: auto;
margin: 0 auto;
/*
下面这两个属性被我用width:auto;代替了
width: -moz-fit-content; /*firefox
width: fit-content; /*chrome
*/
}
.child1{
display: flex;
justify-content: flex-start;
flex-flow: row nowrap;
}
.child2{
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: row nowrap;
}