https://www.sitepoint.com/building-trello-layout-css-grid-flexbox
https://www.sitepoint.com/flexbox-css-flexible-box-layout/
https://www.sitepoint.com/building-mega-menus-flexbox/
http://www.sitepoint.com/3-modern-tools-using-flexbox-grids
http://wesbos.com/flexbox-basics/
https://www.sitepoint.com/quick-tip-how-z-index-and-auto-margins-work-in-flexbox/
https://rachelandrew.co.uk/archives/2017/08/08/changes-to-the-grid-spec-and-taking-on-multi-column-layout
https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
What is the purpose of Flexbox?
Need to find an introductory article on Flexbox. See https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525 as well.
What is the advantage of Flexbox?
Flexbox is more compact compared to the float-based layout approach! The flexbox properties and values are a bit confusing at first glance, but it eliminates the need for a lot of the hacks like negative margins that were necessary with float-based layouts — a huge win.
What are the disadvantages of Flexbox?
One is browser support — currently every modern browser supports flexbox, but some older browsers never will. Fortunately browser vendors are making a bigger push to end support for these older browsers, making a more consistent development experience for web designers. Another downside is the fact that we needed to add the <div class="container"> to the markup — it would be nice to avoid it. In an ideal world, any CSS layout wouldn’t require changing the HTML markup at all.
The biggest downside though is the code in the CSS itself — flexbox eliminates a lot of the float hacks, but the code isn’t as expressive as it could be for defining layout. It’s hard to read the flexbox CSS and get a visual understanding how all of the elements will be laid out on the page. This leads to a lot of guessing and checking when writing flexbox-based layouts.
It’s important to note again that flexbox was designed to space elements within a single column or row — it was not designed for an entire page layout! Even though it does a serviceable job (much better than float-based layouts), a different specification was specifically developed to handle layouts with multiple rows and columns. This specification is known as CSS grid.
