Flexbox 101
If you were tasked with making a page layout for a website, what are some css properties you might use to accomplish that task? You might use a combination of css properties like floats, width, height, padding, display, position, etc. If you are in any way like me, you usually give each of these properties a random value and hope that it works before going to Stack Overflow and copying some snippet that you think might work.
Flexbox will take all the guess work out of arranging and aligning your divs — you no longer will have to playing a guessing game with css properties like float, position, etc. There are two sets of Flexbox properties that you have to be able to differentiate between: flex-container properties and flex-item properties.
A flex container is the div that contains flex-items. In order to make a div a flex-container, it needs a property of “display: flex.” Once a div has magically been created using the “display: flex” property, the child divs of the flex-container become flex-items. It is possible for a flex-item to be a flex-container as well so that the contents of that child div can be manipulated as well.
These are some of the props that are specific to flex-containers:
These are a few of the props that are used on flex-items:
There are many more props that flex box has, but I found that the ones I listed above are enough to get you started with designing beautiful things. I create a repo that has three exercises that will strengthen your familiarity with flexbox. The first exercise is just a small environment to play around with the different values that each of the flex-box properties can take. In the second exercise you will make a simple navigation bar and in the last exercise you will make a photo gallery.
Github Repo: https://github.com/rykuehn/cssTricks
HELPFUL RESOURCES
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://www.flexboxdefense.com/
http://flexboxfroggy.com/
http://caniuse.com/#search=flexbox
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
https://davidwalsh.name/flexbox-layouts
Have fun and stay tuned for more advanced flex box topics next time!
