Html 如何在每个flexbox的底部添加文本
我有一个包含4个flex项目的flexbox容器。我需要像下图一样的输出 我已经完成了编码部分，但我仍然坚持在flexbox下面添加文本 我的代码：Html 如何在每个flexbox的底部添加文本,html,css,flexbox,Html,Css,Flexbox,我有一个包含4个flex项目的flexbox容器。我需要像下图一样的输出 我已经完成了编码部分，但我仍然坚持在flexbox下面添加文本 我的代码： .flex-container { margin: 40px auto 0 auto; margin-top: 0; display: flex; justify-content: center; background-color: white; } .flex-container > div { margi
.flex-container {
margin: 40px auto 0 auto;
margin-top: 0;
display: flex;
justify-content: center;
background-color: white;
}
.flex-container > div {
margin: 40px auto 0 auto;
color: white;
background-color:lightgray;
width: 140px;
margin: 20px;
text-align: center;
line-height: 140px;
font-size: 20px;
}
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
.flex容器{
保证金：40px自动0自动；
边际上限：0；
显示器：flex；
证明内容：中心；
背景色：白色；
}
.flex容器>div{
保证金：40px自动0自动；
颜色：白色；
背景颜色：浅灰色；
宽度：140px；
利润率：20px；
文本对齐：居中；
线高：140px；
字体大小：20px；
}
1.
2.
3.
4.
.flex容器{
保证金：40px自动0自动；
边际上限：0；
显示器：flex；
证明内容：中心；
背景色：白色；
}
.盒子{
保证金：40px自动0自动；
颜色：白色；
背景颜色：浅灰色；
宽度：140px；
利润率：20px；
文本对齐：居中；
线高：140px；
字体大小：20px；
}
.文本{
文本对齐：居中；
}
1.
框1
2.
框2
3.
框3
4.
方框4
.flex容器{
保证金：40px自动0自动；
边际上限：0；
显示器：flex；
证明内容：中心；
背景色：白色；
文本对齐：居中；
}
.集装箱{
保证金：40px自动0自动；
颜色：白色；
背景颜色：浅灰色；
宽度：140px；
利润率：20px；
文本对齐：居中；
线高：140px；
字体大小：20px；
}
1.
方框1
1.
方框2
1.
方框3
1.
方框4
.box{
背景色：#7c7cab；
高度：80px；
显示器：flex；
利润率：10px；
颜色：白色；
}
.box、.textbox{
宽度：20%；
浮动：左；
}
.文本框{
颜色：黑色；
左边距：10px；
右边距：10px；
文本对齐：居中；
}
方框1
方框2
方框3
方框4
文本1
文本2
文本3
文本4