The basics of CSS. The flex container cheatsheet

melnik909 profile image Stas Melnikov ・Updated on ・2 min read

The basics of CSS is a series of cheatsheets that help you understand basic concepts of CSS. In this cheatsheet we learn behavior of a flex container.

What is a flex container? πŸ‘‡

πŸ“Œ The elements that have the flex value for the display property are known as a flex container.

Default behavior of a flex container πŸ‘‡

πŸ“Œ If an 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 a flex container always start on a new line so it displays one below the other.

The width, height, padding, margin properties for a flex container πŸ‘‡

πŸ“Œ We can set the width and height properties for a 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.

P.S. This post was written with the support of my patrons: Ashlea Gable, Tatiana Ten, Claire Collins.


Editor guide