Html 将子div与flex box的底部内侧div对齐

我必须将flex box容器div中的子div与底部对齐。我尝试了不同的选项，如将底部设置为0或边距顶部，但都不起作用

.柔性容器{
显示器：flex；
高度：500px；
背景色：#f1f1；
}
.flex容器>div{
颜色：白色；
宽度：100px；
利润率：10px；
文本对齐：居中；
线高：75px；
字体大小：30px；
}
.垂直
{
盒影：嵌入0px 4px 6px#ccc；
}
.进展{
背景色：#F5；
边界半径：4px；
-webkit盒阴影：插入0 1px2pRGB（0 0/10%）；
盒影：嵌入0px 4px 6px rgba（100100,0.6）；
}   
.进度条信息{
背景色：#5bc0de；
}
.进度条{
盒影：插入0px 4px 6px rgb（100/60%）；
}
1.
如何将此div与底部对齐？

您可以在

flex container>div

上添加flex属性，如下所示：

.flex容器{
显示器：flex；
高度：500px；
背景色：#f1f1；
}
.flex容器>div{
颜色：红色；
宽度：100px；
利润率：10px；
文本对齐：居中；
线高：75px；
字体大小：30px；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
.垂直{
盒影：嵌入0px 4px 6px#ccc；
}
.进展{
背景色：#F5；
边界半径：4px；
-webkit盒阴影：插入0 1px2pRGB（0 0/10%）；
盒影：嵌入0px 4px 6px rgba（1001001000.6）；
}
.进度条信息{
背景色：#5bc0de；
}
.进度条{
盒影：插入0px 4px 6px rgb（100/60%）；
}

1.
底部