如何将块放置在列的底部? [关闭]

问题描述 投票:-1回答:2

我试图将所有蓝色块都放置在列的底部,但这不起作用。

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

enter image description here

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

html css
2个回答
2
投票

应该是.columns,而不是.container。”


0
投票

简单位置:取消解决方案:

© www.soinside.com 2019 - 2024. All rights reserved.