Html 使一个元素粘在div的底部

下面的代码生成一组蓝色框，其中两个框中显示一个白色小框。我怎样才能使这些白色的盒子粘在蓝色盒子的底部？我尝试添加

margintop:auto

到

。测试

，但这不起作用

.flex容器{
显示：-webkit flex；
显示器：flex；
宽度：400px；
高度：250px；
背景颜色：浅灰色；
柔性包装：包装；
}
.弹性项目{
背景颜色：矢车菊蓝；
宽度：100px；
高度：100px；
利润率：10px；
}
.测试{
背景色：白色；
宽度：20px；
高度：20px；
页边距底部：0自动；
}

弹性件1弹性件1弹性件1弹性件1弹性件1弹性件1弹性件
项目1
弹性项目2
弹性项目3
弹性项目3
弹性项目3

只需编辑您的css并将

位置：relative

添加到“flex项目”， 和

位置：绝对
至“测试”。
当然，您必须添加
bottom:0px
才能将其发送到底部

.flex-item {
  position: relative;
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}

.test {
  position: absolute;
background-color: white;
width: 20px;
height: 20px;
bottom: 0px;
}

添加
位置：绝对位置和
底部：0.test
多维数据集（您也可以添加
左：0
，但这是默认值），以及
位置：相对到他们的容器中，让它们充当孩子绝对位置的“锚”


.flex容器{
显示：-webkit flex；
显示器：flex；
宽度：400px；
高度：250px；
背景颜色：浅灰色；
柔性包装：包装；
}
.弹性项目{
背景颜色：矢车菊蓝；
宽度：100px；
高度：100px；
利润率：10px；
职位：相对；；
}
.测试{
背景色：白色；
宽度：20px；
高度：20px；
位置：绝对位置；
底部：0；
}

弹性项目1弹性项目1弹性项目1弹性项目1弹性项目1弹性项目1
弹性项目2
弹性项目3
弹性项目3
弹性项目3
margin
如果父项也是flexbox（如果margin-x有一个值，则也可以使用）

此处：
页边距：自动0应该可以

（
margin:auto 0 auto；
将其设置在右下角）


.flex容器{
显示：-webkit flex；
显示器：flex；
宽度：400px；
高度：250px；
背景颜色：浅灰色；
柔性包装：包装；
}
.弹性项目{
背景颜色：矢车菊蓝；
宽度：100px；
高度：100px；
利润率：10px；
显示：-webkit flex；
显示器：flex；
弯曲方向：立柱；
}
.测试{
背景色：白色；
宽度：20px；
高度：20px；
页边顶部：自动；
页边距底部：0；
}

弹性件1弹性件1弹性件1弹性件1弹性件1弹性件1弹性件
项目1
弹性项目2
弹性项目3
弹性项目3
弹性项目3
您可以直接在flex子系统上使用


.container{
显示器：flex；
}
.放在底部{
自对准：柔性端；
}
/*别理他们*/
.集装箱{
宽度：200px；
高度：200px；
背景：黄色；
}
.放在底部{
宽度：50px；
高度：50px；
背景：青色；
边框：1px纯黑；
}

Tnx以获取您的答案。您还可以告诉我如何确保在调整.test的高度（例如从20px调整到50px）时，.flex项会随之调整大小，以便白框（.test）位于文本的底部和下方，而不会与文本上方的文本重叠？这不起作用-绝对定位的元素独立于它们的父元素，所以改变它们的大小不会影响任何其他对象（可能会重叠）。是的，我刚试过，注意到了。有办法解决这个问题吗？我刚刚添加了第二个解决方案，请看一看。非常感谢Johannes提供的清晰解决方案和解释