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

Posted 2023-03-05

【中文标题】将按钮固定到 flexbox 列布局的底部，margin-top:auto 不起作用

【英文标题】：Pinning button to bottom of flexbox column layout, margin-top:auto not working

【发布时间】：2019-09-02 09:34:21

【问题描述】：

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

【问题讨论】：

使包含按钮显示 flex 的列表，margin 技巧仅适用于作为 flex 容器子项的 flex 项目。您的按钮位于一个弹性项目中，该项目不是弹性容器，因此它不起作用。确保流是列的，所以它会上升和下降

我不知道你是如何添加图片的解决

【参考方案1】：

使list 列flexbox - 注意margin alignment 沿flex 轴（垂直于列flexbox) 仅适用于 inside 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>

【讨论】：

谢谢你——我一直盯着这个看了一天，永远也想不通。非常感谢！