Can you help me understand flex-basis and em?

Hi! I am going through HTML/CSS course and I cannot seem to understand how flex-basis works.

<style>
  #box-container {
    display: flex;
    height: 500px;
  }

  #box-1 {
    background-color: dodgerblue;
    height: 200px;
    flex-basis: 10em;
  }

  #box-2 {
    background-color: orangered;
    height: 200px;
    flex-basis: 20em;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

I do not understand how sizing using ems works. I do understand what ems are. If I am correct, ems determine the size relative to the parent (much like percentages do). However, I don’t see the size of the parent at all. I am quite confused and I don’t see how I could use this in my own code because I don’t know the sizes. Can someone please clarify?

Thanks!

Hey

I think you may have misunderstood em values. Em is relative to the font-size of the parent

If I have a div element with a font size of 16px, using em within that div would equal to
16 px * 1 = 16px = 1em
16 px * 2 = 32px = 2em
16 px * 3 = 48px = 3em

2 Likes

The flex-basis attribute sets the initial size of a flex item and you’re not required to use em units with it.

If it feels easier you can play around with px values until you gain an understanding.

2 Likes

Oh, I see. That clarifies it. Since we don’t have the font size defined, it takes the default value of 16px?