flexbox - CSS: element has 'display: block' and doesn't start a new line

Question

Please take a look on the following code:

.header {
  display: flex;
  width: 100vw;
  height: 20vh;
}

div {
  border: solid;
}

#first {
  flex: 1
}

#second {
  flex: 1
}

#third {
  flex: 1
}

<header class="header">
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
</header>

Answer 1

However, I know that when an element has a display: block property, it means that the element starts a new line.

Your information is wrong because the display property alone never tells us if we will have a new line or not.

Let's take another example without flexbox:

.box {
  width:200px;
  height:200px;
  border:2px solid;
  float:left;
}

<div class="box">

</div>
<div class="box">

</div>