InternetingIsHard Part 3 – CSS Flexbox

This is a continuation of the things I’ve learned from Interneting is Hard. Click here and here for previous posts.

1. Usedisplay: flex; to make a flex container in css.
2. Flex containers only position child elements (not grandchildren, etc).
3. flex-wrap: wrap;

   justify-content: center;

   to create divs which contents wrap when overflow

4. flex-direction: column; 
   to change direction contents are rendered.
   

5.  order: 1; orders the items accordingly (accepts negative values)
6. align-self: flex-end; aligns the element accordingly
7. flex: 1; tells the item to stretch to match the width of div (flex:2 = item stretched by ratio of 2)
8. flex: initial falls back to the item’s explicit width property.
9. Auto-margins eat up all the extra space in a flex container, so instead of distributing items equally, this moves the rest of the items to the right side of the container.