Some Flexbox terms – default CSS values are in bold. E=Remember that these flexbox rules are applied to the container, and the elements inside should ‘listen’ to the layout rules.
display: flex; makes your content use the flexible box layout module (flexbox!)
flex-direction: row, row-reverse, column, column-reverse; control layout and order
Main axis: the primary axis on which you are working; i.e. horizontal for ‘row,’ vertical for ‘column’
Cross-axis: Perpendicular to the Main axis
flex-wrap: nowrap, wrap, wrap-reverse; controls whether flex items spread to multiple rows/columns on browser resize
Now, the rules for the elements inside your flexbox container:
flex: 1 0 200px; a shorthand rule that encompasses flex-grow, flex-shrink and flex-basis
- flex-grow: how much a flex element will grow relative to other items
- flex-shrink: how much an item will shrink relative to others
- flex-basis: initial size before adjusting
So, flex: 1 0 200px means ‘distribute extra space evenly between items, don’t let the items shrink at all, and start them at a width of 200px (kind of like a ‘min-width’)