Html 弹性箱div堆叠而不是水平放置

所以我尝试创建一个flexbox，里面有几个div。div有一个图像和一个应该堆叠的按钮，但是我希望它们对齐成一行。我似乎无法让它们真正排成一排，而是它们在堆叠。以下是HTML和CSS：

.block2{
显示器：flex；
弯曲方向：行；
}
谭先生{
背景：#FFEFD5
}
.kite1 img{
高度：150像素；
宽度：130px；
填充：30px；
}
.套件1按钮img{
高度：50px；
宽度：125px；
}
.kite2 img{
高度：150像素；
宽度：130px；
填充：30px；
}
.KITE2按钮img{
高度：50px；
宽度：125px；
}

---

将

kite1

、

kite2

和

kite3

更改为

kite

然后将

kite

类的样式设置为：

.kite {
  display: flex;
  flex-direction: column;
}

注意：如果您要使用一次标识符（即

class=

或

id=

或

data whatever=

等），请使用

id

。如果计划在多个元素上使用标识符，请始终使用

class

id

s只能在一个元素上使用，而

class

可以在无限数量的元素上使用

.block2{
显示器：flex；
}
凯特先生{
显示器：flex；
弯曲方向：立柱；
}

---

@Ajlec12很高兴我能帮忙。请记住：

class

用于设置多个元素的样式<代码>id用于设置单个元素的样式。把它想象成一个满是孩子的班级，每个thosee孩子都有一张独特的身份证。