Flex Architecture:

Reference: image taken from FreeCodeCamp

 

Justify-Content:

 

Flex direction demo:

 

 

Align-content:

Specifies how flex items are distributed along the cross axis of the flex container. Similar to Justify-content.

Align-items:

Flex-wrap:

Flex-flow:

Place-content:

Align-self:

Flex-grow:

Flex-shrink:

Flex-basis:

Flex

FLEX SHORTHAND PROPERTIES

Flex: flex-grow flex-shrink flex-basis

eg:  flex: 4 2 50em;

Flex-flow: flex-direction flex-wrap

Flex-flow : row wrap;

 

Place-content: align-content justify-content

eg: place-content: center flex-end;