我必须将位于 flex box 容器的 div 内的子 div 与底部对齐。我尝试了不同的选项,例如将底部设置为 0 或边距顶部,但它们都不起作用。
<style>
.flex-container {
display: flex;
height: 500px;
background-color: #f1f1f1;
}
.flex-container > div {
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.vertical
{
box-shadow: inset 0px 4px 6px #ccc;
}
.progress {
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
box-shadow: inset 0px 4px 6px rgba(100,100,100,0.6);
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-bar {
box-shadow: inset 0px 4px 6px rgb(100 100 100 / 60%);
}
</style>
<div class="flex-container">
<div class= "progress vertical" >1
<div class="progress-bar progress-bar-info" style="height: 35%;">
how to align this div to bottom..... ?
</div>
</div>
</div>
答案 0 :(得分:3)
您可以在 flex-container>div
上添加 flex 属性,如下所示:
.flex-container {
display: flex;
height: 500px;
background-color: #f1f1f1;
}
.flex-container>div {
color: red;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.vertical {
box-shadow: inset 0px 4px 6px #ccc;
}
.progress {
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
box-shadow: inset 0px 4px 6px rgba(100, 100, 100, 0.6);
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-bar {
box-shadow: inset 0px 4px 6px rgb(100 100 100 / 60%);
}
<div class="flex-container">
<div class="progress vertical">
<div>1</div>
<div class="progress-bar progress-bar-info" style="height: 35%;">Bottom</div>
</div>
</div>