What are the notable default styles that get applied when we set an element to display: flex;?

Question

What are the notable default styles that get applied when we set an element to display: flex;?

Answer

When we declare display: flex; on an element the notable default styles that get applied to that element are:

  • flex-direction: row;
  • justify-content: flex-start;
  • flex-shrink: 1;
  • align-items: stretch;
  • flex-basis: auto;
  • flex-wrap: nowrap;
4 Likes

How can this information be retrieved when using other attributes that belong to the display property or any property that alters the position of their elements?

Is there some kind of data sheet that can be found for safe keeping with such information?

3 Likes

The Flexbox properties section has a nice visual representation of the properties and their default values.

Also,

20 Likes

Thanks, buddy:) the links were very useful and informative.

1 Like

Thanks, these are immensely useful!

Iā€™d like to add the following as another nice visual representation of flex styles:

2 Likes