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

Question

我是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>

Answer 1

使list为一个列弹性框-请注意，沿 flex轴的 margin对齐（对于列为垂直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>