Flexbox

Author: James Dansie

Flexbox is intended to be a simpler way to organize css layouts. The key part of flexbox is that the main direction of the box can be changed from horizonital to vertical, with a bunch of options inbetween. The following graphic sums this up nicely (from here; https://css-tricks.com/snippets/css/a-guide-to-flexbox/); The main axis by default points from left to right, but that can be reverse, or pointed up and down with some additional properties. This site has excellent example of different properties, and you can click on different ones to see it change live; https://yoksel.github.io/flex-cheatsheet/. Normally we would use 'left' and 'right' to describe the position, but with flexbox the direction direction of the main axis is constantly changing. Instead flexbox describes the direction along the main axis with the following;

• flex-start - will bunch up the child elements by the start of the flex direction
• flex-end - will bunch up the child elements by the end of the flex direction
• center - will bunch up the child elements in the center of the flex direction
• space-between - will push the child elements apart while keeping them on the
• space-around - will add padding around the child elements
• space-evenly - will equally space the child elements