html - 将按钮固定到flexbox列布局的底部，margin-top:自动不起作用

我对flexbox还不太熟悉，我只是试着做一组列，这些列的宽度/高度与内容最多的列的宽度/高度相同，我似乎已经让这个部分正常工作了。我的问题是试图锁定按钮以对齐列的底部。
我已经阅读了大量使用margin-bottom来实现这一点的例子，但这对我并不起作用。感谢任何帮助…如你所见，我的技能充其量只是初级的。短暂性脑缺血发作

.columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.col {
  display: flex;
  flex-direction: column;
  width: 24%;
  border: 1px solid blue;
}

.list {
  flex: 1;
  padding: 10px;
}

.dir_button {
  border: none;
  outline: 0;
  padding: 8px;
  color: white;
  background-color: #956a51;
  text-align: center;
  cursor: pointer;
  width: 80%;
}

button.dir_button {
  margin-top: auto
}

<div class="columns">
  <div class="col">

    <div class="list">

      List item List itemList itemList item List item<br />

      <button type="button" class="dir_button">EMAIL</button>

    </div>
  </div>

  <div class="col">

    <div class="list"> List item List item<br> List item<br>
      <p> List item</p>
      <p>List item </p>
    </div>
  </div>

  <div class="col">

    <div class="list"> List item<br> List item<br> List item<br> List item<br>
      <p><br>
      </p>

    </div>
  </div>

  <div class="col">

    <div class="list"> List item List item<br> List item<br> List item<br>
      <p><br>
      </p>

    </div>
  </div>

</div>

最佳答案

制作list列Flasbox——注意沿柔性轴的边距对齐（垂直列Flasbox）仅在Flasbox内工作，即仅在Flex项目上工作-参见下面的演示：

.columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.col {
  display: flex;
  flex-direction: column;
  width: 24%;
  border: 1px solid blue;
}

.list {
  flex: 1;
  padding: 10px;
  display: flex; /* added */
  flex-direction: column; /* added */
}

.dir_button {
  border: none;
  outline: 0;
  padding: 8px;
  color: white;
  background-color: #956a51;
  text-align: center;
  cursor: pointer;
  width: 80%;
}

button.dir_button {
  margin-top: auto
}

<div class="columns">
  <div class="col">
    <div class="list">
      List item List itemList itemList item List item<br />
      <button type="button" class="dir_button">EMAIL</button>
    </div>
  </div>
  <div class="col">
    <div class="list"> List item List item<br> List item<br>
      <p> List item</p>
      <p>List item </p>
    </div>
  </div>
  <div class="col">
    <div class="list"> List item<br> List item<br> List item<br> List item<br>
      <p><br>
      </p>
    </div>
  </div>
  <div class="col">
    <div class="list"> List item List item<br> List item<br> List item<br>
      <p><br>
      </p>
    </div>
  </div>
</div>