将子 div 底部对齐到 flexbox 内的父 div 中。

Question

我必须将一个在 flex box 容器内部的子 div 对齐到底部。我已经尝试了不同的选项，比如将底部设置为 0 或者 margin-top，但都没有起作用。

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

- nischalinn

Answer 1

你可以在 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>

- Anurag Srivastava