Html 无法使弹性行以全宽显示在新行上

在下面的代码片段中，我试图使“0/2已完成”以全宽显示在新行上。我正试图用flex box实现这一点，但我开始认为它不应该以这种方式使用。实现这一目标的最佳方式是什么

.container{
显示器：flex；
宽度：400px；
高度：40px；
边框：1px纯蓝色；
}
.container>div{
高度：20px；
}
德拉甘德尔先生{
flex:020px；
背景色：rgba（0,0,0,0.2）；
}
.复选框{
柔性：0 30像素；
背景色：rgba（0,0,0,0.3）；
}
.输入{
flex:0自动；
柔性生长：1；
背景色：rgba（0,0,0,0.1）；
}
.阿凡达{
柔性：0 30像素；
背景色：rgba（0,0,0,0.3）；
}
.页脚{
/*出现在新行上*/
}

任务标题
已完成第0页，共2页

我会在容器中添加一个新的div，其中包括除页脚以外的所有其他div，然后将新div设置为display:flex，而不是container。这对我很管用。 还可以考虑使用标记页脚代替div类页脚：

.container{
宽度：400px；
高度：40px；
边框：1px纯蓝色；
}
#纽迪夫{
显示器：flex；
}

任务标题
已完成第0页，共2页

只需将其设置为

宽度：100%

并将

柔性包装：包装添加到容器：


.container{
显示器：flex；
宽度：400px；
高度：40px；
边框：1px纯蓝色；
柔性包装：包装；
}
.container>div{
高度：20px；
}
德拉甘德尔先生{
flex:020px；
背景色：rgba（0,0,0,0.2）；
}
.复选框{
柔性：0 30像素；
背景色：rgba（0,0,0,0.3）；
}
.输入{
flex:0自动；
柔性生长：1；
背景色：rgba（0,0,0,0.1）；
}
.阿凡达{
柔性：0 30像素；
背景色：rgba（0,0,0,0.3）；
}
.页脚{
宽度：100%；/*或弹性：0 1 100%或弹性基础：100%*/
}

任务标题
已完成第0页，共2页