justify-content and align-items!

I am getting more confident with the flex display stuff which is a little bit older and better supported than the grid display stuff as suggested here. I have expanded the CSS here like so:

#wrapper {
   display: flex;
   background-color: blue;
   margin: 10px;
   padding: 10px;
   justify-content: center;
   flex-flow: row wrap;
   align-items: stretch;
   height: 100px;
}
#wrapper div {
   background-color: pink;
   margin: 3px;
   padding: 3px;
   width: 300px;
}

 
 

That gives us this:

 
 

Let's talk through the five things I've added from the bottom up:

1. width: 300px; Alright, if there is no width set the inner divs will be as narrow (unwide) as they can be, snugging up against their content. This likely means inconsistent in size. I put a bunch of Xs on the end of qux to test the fact that I could make the qux div much longer than the rest, and yes I can. (no Obama pun intended) Anyhow, if you set a width, all of the divs will be the same width. If there is not enough room for them to all be as wide as you specify a few interesting things can happen. In this case we are wrapping and I'll get to that, but by default flex-flow: row wrap; is the default setting for flex-flow and what will happen is that the divs will all be equally reduced. If four 300 pixel wide divs lack 100 pixels of needed space then all four divs will be 275 pixels wide. Get it?
2. height: 100px; The stretch effect cannot be seen if all of the inner divs are the same height and the wrapper container no taller, so I fix that problem here.
3. align-items: stretch; This makes the inner divs as tall as possible within their container. If they don't wrap as seen here they are floor to ceiling tall, but in wrapping we sort of get a double-rowed composition.
4. flex-flow: row wrap; This creates the wrapping.
5. justify-content: center; We are centering things! If you look closely you may see a hint more than ten pixels of space at the left and the right of the container before the content begins. The content is centered.