Html 使用（包装在）flexbox，如何使所有行具有相同数量的&；第一行的尺寸？

使用flexbox，我的目标是让文本沿页面宽度“完美”分配。所谓“完全分配”，我的意思是：

如果有3个部分，则每个部分的文本中心位于网页宽度的五分之一处

我是如何做到这一点的：

页脚{
显示：柔性；柔性包裹：包裹；
颜色：白色；
左侧填充：100px；
背景颜色：灰色；
}
页脚>*{
弹性基础：0px；
柔性生长：1；
右边填充：50px；
显示：柔性；对齐内容：中心；对齐项目：中心；
}
页脚>*：第n个子项（1）{
背景色：红色；
}
页脚>*：第n个子项（2）{
背景颜色：绿色；
}
页脚>*：第n个子项（3）{
背景颜色：蓝色；
}

一个。
两个。
三个。

我相信您正在寻找的解决方案是。您可以指定行的结构，如下例所示。如果我更清楚您具体想要的目标，我可以给出更详细的答案，但假设您所问的是后续行与第一行保持相同的结构，这就是解决方案

作为一个不到一个月前专门使用flexbox设计网页的人，我强烈建议切换到CSS网格来构造您想要的行和列，并使用flexbox作为补充

注意：后续行的背景颜色将与初始行不同，因为CSS只针对页脚的第n个子行

页脚{
显示：网格；
网格模板柱：1fr 1fr 1fr；
柔性包装：包装；
颜色：白色；
左侧填充：100px；
背景颜色：灰色；
}
页脚>*{
弹性基础：0px；
柔性生长：1；
右边填充：50px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
页脚>*：第n个子项（1）{
背景色：红色；
}
页脚>*：第n个子项（2）{
背景颜色：绿色；
}
页脚>*：第n个子项（3）{
背景颜色：蓝色；
}
@媒体屏幕和屏幕（最大宽度：400px）{
页脚>*{
证明内容：初始；
}
}

一个。
两个。
三个。
一个。
两个。
三个。