Are flex items considered block-level items? - html

Question

I have been studying flex box layout method for the last week but I feel I can't get my head around. I'm going straight to the point.
Let's look at this scenario
.container{
display:flex;
}
.container div{
border:2px solid red;
background: peachpuff;
height:50px;
flex: 1;
}
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
Here, we have 3 divs items inside of a div container. We applied some height to them and a flex: 1 property, which means that items will grow inside their container, with the 50px height and they will start from a flex-basis of 0.
Let's say now that we change the .container rule to:
.container{
display:flex;
flex-direction: column;
}
.container div{
border:2px solid red;
background: peachpuff;
height:50px;
flex: 1;
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
We added the flex-direction: column; property, but we won't change anything on the other rule, meaning that the same height is applied and the flex:1 property still is applied. Now our divs will collapse, because even thought the flex-grow factor is 1, the flex-basis is set to 0.
There is the think I don't understand, in both case scenario we had empty divs and in both cases we applied the same flex: 1 property, which automatically sets the flex-basis to 0. In the first example however 3 boxes will be created and they will share the same amout of space in the container (even thought they have no HTML content), while in the second example the boxes will collapse and we will just see the border.
The only explanation I could come up with is that those divs (that got no content) items are treated (somehow?) as block-level elements and their content-box width is given a value which is not 0 (and will be taken as the starting basis for the flex-grow), but the height value is set to 0 (and hence will be taken as the starting basis for the flex-grow property, making everything collapse).
However, how can the items be at a flex-level and at a block-level at the same time? If they were at a block-level, then why with if we create this code:
.container{
display:flex;
}
.container div{
border:2px solid red;
background: peachpuff;
height:50px;
}
<div class="container">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
Those items will not be treated as block-level items because no new line will be created between them and they don't extend their width to their container.
I apologize for the long question, I hope I was clear enough and I hope somebody can clarify my dobuts!