align-items : what is the difference between flex-start and Stretch? - html

Question

can you please tell me align-items : what is the difference between flex-start and Stretch?
.container {
height: 500px;
padding: 10px;
margin: 50px auto;
background: #eee;
display: flex;
align-items: flex-end
}
.container .box {
padding: 10px;
width: 200px;
height: 200px;
background-color: #fff;
}
<div class="container">
<div class="box"></div>
</div>

Answer 1

You will see no difference if you set a height to your element.
stretch
Flex items are stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints.ref
In your case, nothing will happen with stretch because of the height you set.
flex-start
The cross-start margin edges of the flex items are flushed with the cross-start edge of the line. ref
This is simply align the item on the top. Again, nothing will happen visually since it's somehow the default behavior (not the default value).
.container {
display:inline-flex;
width:200px;
height:200px;
border:2px solid;
}
.container > span {
width:100px;
height:100px;
background:red;
}
<div class="container" style="align-items:flex-start">
<span></span>
</div>
<div class="container" style="align-items:stretch">
<span></span>
</div>
Now remove the height constraint and you will see the difference:
.container {
display:inline-flex;
width:200px;
height:200px;
border:2px solid;
vertical-align:top;
}
.container > span {
width:100px;
min-height:100px;
background:red;
}
<div class="container" style="align-items:flex-start">
<span></span>
</div>
<div class="container" style="align-items:stretch">
<span></span>
</div>