为什么设置margin-top来使元素自动对齐容器的底部？

Question

我不明白为什么要在“产品”类的容器内将按钮的边距顶部设置为自动将按钮与“产品”类的容器的底部对齐。

<div class="product">
                  <div style='width:150px' class='twohundo'>
                      <img src='randomLink'>
                      <div class='label'>
                          <p>Quick View</p>
                      </div>
                      <div class="productdetails">
                        <p>Random Text</p>
                      </div>

                  </div>
                  <button type="button" name="button">Text</button>
</div>

.product{
  display:flex;
  flex-flow:column wrap;
  align-items:center;
  justify-content:center;
  text-align: center;
}
.product button{
margin-top:auto;
}