from @lightsbee at Money Lover https://moneylover.me/

2. 3 Flexbox Specs
The old 2009 spec — display: box
The 2011 "tweener" spec — display: flexbox

3. What is flexbox ?
The previous version of CSS
● Block layout
● Inline Layout
● Table layout
● Position layout
CSS3
● Grid layout
● Flexbox layout

4. How to use flexbox?

5. Flexbox Properties
● Treats .flex-container as a flex container.
● Treats all direct children of .flex-container as flex items.
● Flex items will be laid out in a horizontal line.
● Flex items will be laid out in source order.
● Flex items will be laid out starting from the left side of the
flex container.
.flex-container {
display: flex;
}

6. Properties apply to container
#1 flex-direction
- column
- column-reverse
- row
- row-reverse

7. Properties apply to container
#2 Justify-content
Justify-content controls how you align items on the
main axis.
● Flex-start
● Flex-end
● Center
● Space-between
● Space-around

8. Properties apply to container
#3 Align-item
Align-item controls how you align items on the cross axis.● flex-start
● flex-end
● center
● stretch
● baseline***

9. Properties apply to items
#1 Flex-basis
Flex-basis controls the default size of an element, before it is manipulated by other Flexbox properties

10. Properties apply to items
#2 Flex-grow

11. Properties apply to items
#3 Flex-shrink

12. Properties apply to items
#3 Flex (short hand)

13. Properties apply to items
#3 Align-self
● flex-start
● flex-end
● center
● stretch
● baseline

14. What About Older IE Versions?
- This is called graceful degradation and is certainly
the easiest approach.
- Fallback to display:block
Graceful Degradation with Modernizr
.parent { display: flex; }
.child { flex: 1; }
.no-flexbox {
.child { float: left; width: 50%; }
.parent::after {
@include clearfix();
}
}