我试图将所有蓝色块都放置在列的底部,但这不起作用。
我将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>
应该是.columns
,而不是.container
。”
简单位置:取消解决方案: