在flexbox中未考虑图像大小

Question

我有一个想要垂直对齐的图像和文字：

  <div>
      <img src="xyz.png" style="width:70%;">
      <p>xyz</p>
  </div>

文字浮在图像周围。内联的宽度是内联的，因为它是一个所见即所得的内容字段，并且我无法控制标记。

现在我考虑通过flexbox进行垂直对齐：

div {
  display: flex;
  align-items: center;  
}

Etvoilà。它工作但图像的百分比大小不再受到尊重。为什么？此外，这个新的图像尺寸是基于什么？这不是百分比，也不是原始尺寸。

Codepen Example

.original {
  float: left;
}

img {
  float: left;
  padding: 10px;
}

.vAlign {
  display: flex;
  align-items: center;
}

<h1>Original Markup</h1>
<div class="original">
  <img src="http://via.placeholder.com/350x150" style="width:70%;">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd </p>
</div>


<h1>verticalign (But wrong img Size)</h1>
<div class="vAlign">
  <img src="http://via.placeholder.com/350x150" style="width:70%;">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p>
</div>

Answer 1

弹性容器的初始设置为flex-shrink: 1。这意味着允许flex项目缩小以避免容器溢出。禁用flex-shrink。

＆＃13;

＆＃13;

.original {
  float: left;
}
img {
  float:left;
  padding: 10px;
}
.vAlign {
  display: flex;
  align-items: center;
}

img { flex-shrink: 0; } /* NEW */

＆＃13;

<h1>Original Markup</h1>
<div class="original">
<img src="http://via.placeholder.com/350x150" style="width:70%;">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd </p>
</div>


<h1>verticalign (But wrong img Size)</h1>
<div class="vAlign">
<img src="http://via.placeholder.com/350x150" style="width:70%;">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p>
</div>

＆＃13;

＆＃13;

＆＃13;

还注意 float does not work in a flex container。