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

Posted 2023-03-05

【中文标题】连续两个项目没有调整大小 - flexbox [重复]

【英文标题】：two items in a row without resizing - flexbox [duplicate]

【发布时间】：2021-04-17 15:05:33

【问题描述】：

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

这是我的html代码：

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

这是我的 CSS：

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

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

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

【问题讨论】：

我猜他们会在这里讨论***.com/questions/18611195/…

将align-items: center 添加到.head_form

【参考方案1】：

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

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


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