https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
https://codepen.io/Nate-weeks/pen/LqrJxJ
Flexbox is a way to organize and align html content. It's similar to the css grid layout except it works in one dimension instead of two! I'm not sure exactly how this makes things more or less convenient but regardless with flexbox you either set the flex-direction: rows or flex-direction: columns. Flexbox makes doing stuff like creating a menu way easier that trying to float things left and right and display-inline and all that other crap you have to deal with without a grid or flexbox. It's great! My example is some ways you can justify and align content in nested flex divs.
You initialize a flexbox by setting the css of a containing div to display: flex. This initializes some defaults like flex-wrap: nowrap, flex-direction: rows, and flex-basis: auto. What this does is make each of the elements inside of the container line up in a neat row with their size equal to that of the elements they contain.
You can create a multi-line flex container by setting flex-wrap: wrap; and then put enough elements into the container so they don't fit. If you set the property to flex-wrap: nowrap they would all shrink to fit in the container, but with wrap they will wrap around to a new line.
You can short-hand flex-direction and flex-wrap properties with flex-flow. For instance flex-flow: row-reverse wrap, would set the axis to rows, reverse the order of elements and wrap the overflow to a new line.
Each element in a flex container has three properties: flex-grow, flex-shrink and flex-basis. Flex grow controls how each element expands to fill the space. For instance an element with flex-grow: 2 will fill twice as much space as an element with flex-grow: 1. Flex-shrink does the opposite, it defines how much an item will shrink when there isn't enough space based on its ratio to other items. Flex-basis determines the base size of the element, when set to auto is takes up the amount of size of its internal elements. These can be shorthanded as flex: grow shrink basis ie: flex: 1 1 100px.
There are a lot of justify-content properties. justify-content: flex-start will set everything to the left hand side of a row. justify-content: flex-end will justify it to the right hand side. justify-content: center will align it in the center. justify-content: space-around, space-between, space-evenly do what you might expect.
