css - CSS flex元素在图像时不会增长或收缩

This question already has an answer here:

Why don't flex items shrink past content size?

                                    （1个答案）


                                2年前关闭。


我有一个简单的图形标签，在左侧包含一个图像，在右侧包含一些文本：

figure {
  display: flex;
  margin: 0;
  padding: 0;
}

figure img {
  flex: 2 2 200px;
  align-self: flex-start;
}

figure figcaption {
  flex: 3 3 300px;
  margin: 0;
  padding: 0;
}

<figure>
  <img src="https://placeimg.com/640/480/any">
  <figcaption>
    <h2>
      The Headline
    </h2>
    <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 gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. 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 gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
  </figcaption>
</figure>

http://jsfiddle.net/Sempervivum/k7g36p1x/3/

不幸的是，图像没有像CSS中定义的那样增长或缩小。这是什么？我知道可以通过使用其他容器包装图像来解决此问题，但是我不喜欢这样，并且想了解为什么这种简单方法不起作用。

最佳答案

我有一个类似的问题，我通过在flex项目中增加宽度来解决。

在您的情况下：

  figure img {
    flex: 2 2 200px;
    width: 200px;
    align-self: flex-start;
  }

  figure figcaption {
    flex: 3 3 300px;
    width: 300px;
    margin: 0;
    padding: 0;
  }

关于css - CSS flex元素在图像时不会增长或收缩，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50578200/

上一篇：html - 当屏幕变小时，bootstrap col 调整大小

下一篇：javascript - 我需要帮助在大屏幕上呈现我的网站

相关文章：

html - 背景大小 :100% on blackberry 问题

html - flex 动态高度适合图像

html - Firefox 中的 purecss.io 网格中断

css - Angular 6 垂直 50-50 高度的 flex 布局

javascript - 无法加载正确捆绑的图像

卫星图像的图像处理

css - 将 Bootstrap 导航栏右对齐

javascript - 句子中第一个单词的首字母大写

javascript - CSS/JS 不适用于 firefox，适用于 chrome

html - 用背景图像填充 SVG 路径元素