Adding flex-wrap to a flexbox container allows the items to form a grid. The content can then be aligned and distributed along the grid using justify-content and align-content.
Pretty good lesson. My mind was a bit blasted at the grow and shrink concepts, but I'm sure I'll get it as soon as I start playing around with it.
Out of curiosity, how would you align the orphaned image on the last row to be aligned to the left, rather than to the middle?
Sadly there isn't a CSS only solution right now. One solution is to add extra items with zero height so they take up the same space but aren't visible.
Hopefully, in the future, there will be support for multiple ::after pseudo elements which will be treated like real DOM children.
Short and to the point. Brilliant!
With flexbox and post-css, I'm kind of thinking I don't need Sass/Less anymore.
It's my current favorite flavor of CSS.
awesome tutorial. in the grid example, what would you do if you wanted to remove all spaces between pictures?
center (depending on the justification you want).
It seems using
align-items: center; similar to what
align-content: space-around; does in this example. What is the difference when using align-items and align-content?
The most perceivable difference is that
align-items: center will have an effect even when the content takes only a single line.
align-content on the other hand takes effect only when the content is spread across multiple lines.