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

时间:2019-04-11 17:01:30

标签: html css css3 flexbox alignment

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

1 个答案:

答案 0 :(得分:2)

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