What is the flex container?
The elements that have the flex value for the display property are known as the flex container.
Default behavior of the flex container
If a inline element by default has the computed value is flex then it becomes a block element. For example, the inline span element has display: flex.
The width of the flex container fills up the horizontal space left and right on its parent element if it's there. If no, element fills up the viewport. The height is calculated depending on the content height.
Also the flex container always start on a new line so it displays one below the other.
The width, height, padding, margin properties for the flex container
We can set the width and height properties for the flex container.
We can set the padding and border properties.
When we set the margin property we get that the margin-top property of the first child element and margin-bottom of the last child element ends up outside the parent.
But if we set the height, border or padding properties for the parent element the margin-top and margin-bottom will cease collapsing.
When there are adjacent siblings, the margin-bottom of the top element collapses with the margin-top of the bottom element. The resulting size is the biggest between the two.