This how the footer displays. However, I cannot discern from the HTML and CSS why the large space between the copy right span and attribution span. It looks great. I understand the content div is a flex box, and the spans are flex items and they will display inline by default. I do not understand the spacing.
Additional information:
I should have included that the display: flex allows us to use flex-grow: 1 which produces the result in the image of the footer (above). However, it does not explain why those spans grew so disproportionally.
Flow Layout algorithm specifies that span elements are displayed inline. So we did not need the display:flex for that. But it does enable us to flex-grow: 1. I hope someone can explain this.
The look we want must be a html block containing a div (or other block level tag) with display:flex, and two spans with flex-grow: 1. Other block level tags worked instead of span.
Theory: The flex algorithm displays this special style inside blocks with a child block set to display: flex and the flex items set to flex-grow: 1. Otherwise, it displays spans the same as the flow algorithm.
I suspect the first flex-items gets the full width of screen, subsequent flex-items get whatever their content dictates.