Basic Introduction to Flex Box

Goals

Get students comfortable with FlexBox

• Main Axis (Default "Row" "left to right")
• Cross Axis (Default "Column" "top to bottom") (Perpendicularity/Orthogonal to Main Axis)
• justify-content Modifies the Main Axis
• align-items Modifies the Cross Axis
• flex-direction Modifies the direction of the Main Axis

Usage

When presenting this. Demo it all out. Use discretion if you want students to follow along or not

Go Slow

Have Fun