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