Minimal CSS
If you look at the CSS you can see not much is needed to setup the FlexBox, which is the overall layout. The majority of the CSS here is for aspects such as color and padding.
Obviously this looks a little bland, but the general layout is setup without much work. Time can be spent focusing on spicing it up instead of troubleshooting for fully responsive design
No Media Queries Required
Resize this screen to see how the elements reflow. CSS FlexBox can eliminate the need for many media queries. On this page I probably would add a media query to reduce the margins when sized under 400px width, but current setup isn't too horrible.
Unnecessary?
So it has been pointed out to me that FlexBox isn't necessary here—I'm not really demonstrating anything by using it in this way, at least in the body portion. Removing the flex CSS for .flexContainer shows that to be true.
I guess I got caught up in playing around with FlexBox that I forgot to think logically if there was a better solution. Thanks to Reddit users Ronin84 & Sebazzz91 for pointing that out!
Oh well, it was all for practice anyway. Now I know that a flex container with the attributes column, nowrap, flex-start, and stretch are basically the same as no flex container at all. The power of the flex is really in the growing and shrinking, which isn't used in the body here.
Subject Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Add an Image to one of your Sections
Several ways to add images. In this instance I turned this section into a flexbox. Using row wrap I set the heading to 100% of the width so it would take its own line. I have the paragraph grow to fill space but image stay the same size.
If I wanted the image above or below the text, instead of side by side, it wouldn't require the flexbox and could have added without any changes to CSS. Many different options, you just have to think how you want your elements to reflow.