如何将块定位在列的底部？ [关闭]答案

【问题标题】：How to position a block at the bottom of column? [closed]如何将块定位在列的底部？ [关闭]
【发布时间】：2020-07-14 13:25:24
【问题描述】：

我尝试将所有蓝色块放置在列的底部，但它不起作用。

我使用margin-top: auto 作为最后一个元素，但它不起作用。我做错了什么？

.container {
  display: flex;
  flex-direction: row;
  align-item: center;
  width: 100%;
  height: 100%;
  border: solid green;
}

.columns {
   width: 100%;
   border: solid blue;
   display: flex;
   flex-direction: column;
}

.row {
  height: 50px;
  width: calc(100% - 20px);
  background-color: #737373;
  margin: 10px 10px;
}

.last-row {
  height: 50px;
  width: calc(100% - 20px);
  background-color: lightblue;
  margin: 10px 10px;
  margin-top: auto;
}

<div class="container">
  <div class="columns">
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="last-row"></div>
  </div>
  <div class="columns">
    <div class="row"></div>
    <div class="row"></div>
    <div class="last-row"></div>
  </div>
  <div class="columns">
    <div class="row"></div>
    <div class="last-row"></div>
  </div>
</div>

Position last flex item at the end of container

https://codepen.io/geeny273/pen/rNVbvWg?editors=1100

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
您没有将正确的 flexbox 属性应用于列......只需按照您提供的链接中的示例进行操作即可。

标签： html css

【解决方案1】：

.columns 本身应该是弹性盒，而不仅仅是 .container。

【讨论】：

【解决方案2】：

简单位置：绝对溶液：

.container {
  display: flex;
  flex-direction: row;
  align-item: center;
  width: 100%;
  height: 100%;
  border: solid green;
}

.columns {
   width: 100%;
   border: solid blue;
  position:relative;
  padding-bottom:65px
}

.row {
  height: 50px;
  width: calc(100% - 20px);
  background-color: #737373;
  margin: 10px 10px;
}

.last-row {
  height: 50px;
  width: calc(100% - 20px);
  background-color: lightblue;
  margin: 10px 10px;
  position:absolute;
  bottom:5px;
}

【讨论】：