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

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>