Introduction To CSS Flexbox

This aim of this course is to provide you with enough knowledge on the uses of various CSS Flexbox properties. This course will cover both the Flexbox properties you can apply to a parent container as well as the Flexbox properties that can be applied to its children.

The Parent Flex container properties that will be addressed include:

Flex Direction - Understand the direction in which you wish to display the items inside your flex parent container whether it be as a column or a row

Flex Wrap - Learn the options available for wrapping the items within your flex container

Flex Flow - Learn how to simplify applying the Flex Direction and Flex Wrap properties with this shorthand property

Justify Content - Explore the options available for organizing your Flex Items based on the main axis

Align Items - Explore the options available for organizing your flex items based on the cross axis

Align Content - Explore the options available for controlling the way in which each of your flex lines are organised along the cross axis

The Child Flex Item properties that will be addressed include:

Flex Basis - Discover how you can specify an initial width or height on a flex item using this property

Flex Grow - Learn how you can expand the sizing of your flex items using this property

Flex Shrink - Explore how the flex items can be scaled down as the parent container is adjusted in size using this property

Flex - Learn how to simplify applying the Flex Basis, Flex Grow and Flex Shrink using this shorthand property

Order - Learn how you can rearrange the order of the flex items using this property

Align Self - Discover how you can individually set an alignment on each of the flex items within a flex container