In flexbox, when wrapping occurs, can we make it so that all rows have the same dimensions of columns as the first row?

Question

Abbrevations: FC = flex-container. FI = flex-item.

My task:

i) have any number of FIs.
ii) the text in each FI must be horizontally well-aligned (the middle of the texts must occur at integer divisions along the width of the FC e.g. for a FC with a width of 600px housing 3 sections, the middle of the texts must occur at 6ths along the FC e.g. 100px, 300px, 500px. Reason? This looks neat).

I have somewhat achieved this task:

footer {
  display: flex; flex-wrap: wrap;
  color: white;
  background-color: grey;
}

footer > * {
  flex-basis: 0px;
  flex-grow: 1;
  padding: 0 50px;
  display: flex; justify-content: center; align-items: center;
}

footer > *:nth-child(1) {
  background-color: red;
}

footer > *:nth-child(2) {
  background-color: green;
}

footer > *:nth-child(3) {
  background-color: blue;
}

<footer>
  <section>
    <div>Iam1blahblah.</div>
  </section>
    <section>
    <div>Iam2blahblah.</div>
  </section>
    <section>
    <div>Iam3blahblah.</div>
  </section>
</footer>

Question/new-task: However, when wrapping occurs it looks ugly, imo, when the wrapped FI positions at the center of the page. This leads me to think: wouldn't it be nice if we could have a system where all rows have the same dimensions/number of columns as the first row (like CSS-grid) AND we have that wrapping functionality that flex-box has (there's a min-width items can be and they'll wrap onto a new row when they can't fit into the row they're currently on).

Here's an example of what I mean:

| . | . | . | . | . | <-starts like this.

| . | . | . | . |
| . | <-when 1 items wrap, it looks like this.

| . | . | . |
| . | . | <-when 2 items wrap, it looks like this etc.

Current (imperfect) solution: use a media query to make the text of all FIs align to the left when you think wrapping'll occur (the reason why it's imperfect is because it doesn't preserve texts being horizontally well-aligned (the definition I gave earlier)):

footer {
  display: flex; flex-wrap: wrap;
  color: white;
  background-color: grey;
}

footer > * {
  flex-basis: 0px;
  flex-grow: 1;
  padding: 0 50px;
  display: flex; justify-content: center; align-items: center;
}

footer > *:nth-child(1) {
  background-color: red;
}

footer > *:nth-child(2) {
  background-color: green;
}

footer > *:nth-child(3) {
  background-color: blue;
}

@media screen and (max-width: 600px) {
  footer > * {
    justify-content: initial;
  }
}

<footer>
  <section>
    <div>Iam1blahblah.</div>
  </section>
    <section>
    <div>Iam2blahblah.</div>
  </section>
    <section>
    <div>Iam3blahblah.</div>
  </section>
</footer>