html-将按钮固定到flexbox列布局的底部,margin-top：auto不起作用

我是flexbox的新手,只是尝试创建一组列,使其宽度/高度与内容最多的列保持相同,而且我似乎已经使该部分正常工作.我的问题是尝试固定按钮以使其与列的底部对齐.

我已经阅读了很多使用margin-bottom来实现此目的的示例,但是它对我不起作用.任何帮助表示赞赏…如您所见,我的技能充其量是最基本的. TIA

.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>

最佳答案

将列表设为一列flexbox-请注意,沿flex轴的边距对齐(垂直于一列flexbox)仅在flexbox内部有效,即,仅适用于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>