Setting the Flex Direction establishes the main axis and direction that child elements are placed along in the layout.
Setting align items determines how child elements are spread across the the remaining space of the cross axis (the opposite of the axis set in Flex Direction) they lie on.
The Justify Content property determines how children elements are spread across the the remaining space of the axis they lie on.
Align Self shares the same positioning behavior as align items, however, it is set on each individual child element and overrides the settings applied to the parent element in Align Items.
The Flex Grow property describes how a child element will automatically resize itself in relation to other child elements within a parent element.
Flex Shrink is generally used in tangent with Flex Grow and determines the behavior of children elements once they exceed the size of the container.
The Flex Wrap property is set on a container and determines how child elements will be laid out if they exceed the maximum dimensions of the the container.
Setting the Align Content property determines how the lines of elements are positioned on the cross-axis (the axis opposite of the main axis defined in Flex Direction).
Updated about a month ago