Getting to D3.js: Flexbox
Moving on from the foundations of CSS, the next thing up was Flexbox.
Flexbox is a one-dimensional layout model used to arrange items in rows or columns. To use Flexbox, you declare it on a container and can begin using it right away with it’s automatic defaults, or you can build on it from there.
Some ways to modify Flexbox that were covered in this course:
Flex Direction
This sets how items are placed in the container (row, column, row-reversed, etc.)
Flex Layout
This was the meat and potatoes of the course. This covered several possible properties for the flex container and flex items. See below for a great cheat sheet. This section also had a great site for testing Flexbox layout skills, using Flexbox Froggy, an interactive game where you write some Flexbox CSS to return the frog to their respective lily pad.
Flexbox Sizing
This section covered all the ways you can size Flexbox items, including flex-grow and flex-shrink
Capstone Project- Flexbox Pricing Table
This project was to create a pricing table, the kind you see when you are looking a new service and they offer different pricing tiers (basic, standard, premium), that flexes from row to column when changing the web browser size.
Here is my output and finished project!
Up Next: Grid
