Aligning flex items to the flex-end - css

Question

Hei,
I'm creating grid layout and when trying to align items on flex-end or start, height/width becomes zero.
What I'm wondering is, is it possible to align items in flex container to the top/bottom/center WITHOUT specifying height/width? In my case I didn't specify any height and it doesn't work. If I specify it, it works. Line that doesn't work is commented in first example.
Here is code:
.flex-container {
display: flex;
background: silver;
width: 400px;
height: 200px;
//align-items: flex-start;
}
.flex-item {
background: blue;
flex: 1 0 10px;
margin: 5px;
}
.flex-container2 {
display: flex;
background: silver;
width: 400px;
height: 200px;
align-items: flex-end;
}
.flex-item2 {
background: blue;
height: 50px;
flex: 1 0 10px;
margin: 5px;
}
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
<br>
<div class="flex-container2">
<div class="flex-item2"></div>
<div class="flex-item2"></div>
<div class="flex-item2"></div>
<div class="flex-item2"></div>
</div>

Answer 1

As the default value for align-items is stretch, hence they fill their parents height, and you change it to flex-start/flex-end, the row flex items becomes 0 in height, and will need content (or a height/min-height) for you to actually see them.
.flex-container {
display: flex;
background: silver;
width: 400px;
height: 200px;
align-items: flex-start;
}
.flex-item {
background: blue;
min-height: 20px;
flex: 1 0 10px;
margin: 5px;
}
.flex-item:nth-child(even) {
align-self: flex-end;
}
.flex-container2 {
display: flex;
background: silver;
width: 400px;
height: 200px;
align-items: flex-end;
}
.flex-item2 {
background: blue;
height: 50px;
flex: 1 0 10px;
margin: 5px;
}
<div class="flex-container">
<div class="flex-item">They need content or a height/min-height</div>
<div class="flex-item">They need content or a height/min-height</div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
<br>
<div class="flex-container2">
<div class="flex-item2"></div>
<div class="flex-item2"></div>
<div class="flex-item2"></div>
<div class="flex-item2"></div>
</div>