css盒子宽度自动补齐剩余距离

要实现CSS盒子宽度自动填充剩余距离，可以使用flex布局中的flex-grow属性或者grid布局中的fractional unit（fr）单位。

下面是两种方法的示例：

1. Flex布局：

   .container {
     display: flex;
   }
   
   .box {
     flex-grow: 1;
   }

   在这个例子中，.container是包含盒子的父元素，.box是要填充剩余宽度的盒子。通过将flex-grow属性设置为1，.box将会自动填充剩余的宽度。

2. Grid布局：

   .container {
     display: grid;
     grid-template-columns: 1fr 1fr; /* 可根据需要添加更多的列 */
     grid-gap: 10px; /* 可选，用于设置盒子之间的间距 */
   }
   
   .box {
     /* 这里可以添加自定义样式 */
   }

   在这个示例中，.container是包含盒子的父元素，通过grid-template-columns属性设置列的宽度，使用1fr单位表示剩余的空间。每个.box元素都会自动填充剩下的宽度。

   这两种方法都可以实现盒子宽度自动填充剩余距离，具体选择哪种方法取决于你的布局需求和兼容性要求。