Flex into a Row or a Column with flex-direction

Change the Spacing of Flexed Components with justify-content

Change the off-axis Alignment of a Flexed Container with `align-items`

Change the Alignment of a Single Flexed Item with 'align-self'

Wrap Elements Inside of a Flexed Container with `flex-wrap`

Proportionally Grow a Flexed Element by Setting `flex-grow` or `flex` Styles

Get Started with Flexbox CSS Layouts

We changed the axis layout with 'justify-content', and the "off axis" layout is controlled by 'align-items'.  The most common values are `flex-start`, `flex-end`, or `center`.

Change the off-axis Alignment of a Flexed Container with `align-items`

Share this video with your friends

Course

Get Started with Flexbox CSS Layouts