如何在底部的flexbox中对齐div？

<style>
  .container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    height: 300px; /* 设置容器高度，以便演示效果 */
    border: 1px solid #ccc; /* 设置容器边框，以便演示效果 */
  }

  .item {
    width: 100px;
    height: 50px;
    background-color: #f1f1f1;
    margin-bottom: 10px;
  }
</style>

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>