连续两个项目没有调整大小 - flexbox [重复]

Question

我有一个简单的问题：我想将文本和图像放在一行中。我尝试使用 display flex，但它总是调整图像大小，这不是我想要的。

这是我的html代码：

 <span class="head_form">
     <h3>Neue Einkaufsliste</h3>
     <img src="img/close.png" alt="close button">
 </span>

这是我的 CSS：

.head_form{
display: flex;
flex-wrap: wrap;}

我还想把结束图像放在盒子的最右边。它总是看起来像这样：

这可能很容易解决，但我现在很困惑。感谢您的帮助:)

Answer 1

<div class="flex-layout">
  <div class="flex-item"><h3>Neue Einkaufsliste</h3></div>
  <div class="flex-item"><img src="img/close.png" alt="close button"></div>
</div>

.flex-layout{
display: flex;
flex-wrap: no wrap;
}

.flex-item img{
width: (**Fixed width**px)
}