Width and flex

1. Width:

• auto
• 100%
• max-content
• min-content
• fit-content
• vw

Width auto: It will fit the element in available space including margin, border, and padding. That means margin, border, and padding include in that full width.

Width 100%: It will make content width 100%. margin, border, and padding will be added to this width and the element will overflow if any of these are added. That means margin, border, and padding are not included in that full width.

Max-content: Expands to fit the element's maximum content size.

Min-content: Collapses to fit the element's minimum content size.

Fix-content: Sizes the element based on its content's preferred size within the available space, combining aspects of both max-content and min-content.

vw: viewport wide. vw is a CSS unit that represents a percentage of the viewport's width.

Flex:

If flex-direction: row;

default value:

• row is the default value of flex-direction.
• start is the default value of justify-content.
• stretch is the default value of align-items. (y-axis full height will take).

• justify-content will work (x-axis or horizontal) 
• align-items will work (y-axis or vertical)

If flex-direction: column;

default value:

• justify-content will work (y-axis or vertical)
• align-items will work (x-axis or horizontal)