Css实现div宽度自适应

    今天开发过程中遇上一个需求，要求一个父元素包含三个div，div并排分布，大小相等，在父元素中居中，每个div最大宽度为480px，屏幕满足情况下尽量满足480px的大小，要求能随着屏幕尺寸变化等比例变化。
    解决措施的话，就是利用css中的flex布局解决。

<template>
	<div class="container">  
	  <div class="box">Box 1</div>  
	  <div class="box">Box 2</div>  
	  <div class="box">Box 3</div>  
	</div>  
</template> 
<style>  
.container{
    margin: 0 auto; /*水平居中*/
    margin-top:460px; /*设置距顶高度*/
    max-width: 1440px; /*最大宽度，因为是三个，3*480*/
    width:100%;/* 使得div宽度总是占满其父容器的宽度，但不超过max-width */ 
    height: 360px; /*div的高度*/
    overflow: auto; /*溢出添加导航条*/
    display: flex; 
    text-align: center;
    justify-content: center;

}  
  
 .box {  
   flex: 1; /* 使盒子等比例填充空间 */ 
   max-width: 480px; /* 设置最大宽度 */  
   height: 100%;
   margin: 0; /* 盒子之间的间隔 */  
   flex-shrink: 1; /* 在Flex容器中允许盒子缩小 */  
 }  
</style>