html 按钮距离底部,html-将按钮固定到flexbox列布局的底部,margin-top：auto不起作用...

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

}

List item List itemList itemList item List item

EMAIL

List item List item
List item

List item

List item

List item
List item
List item
List item

List item List item
List item
List item