html - 如何使用 flex 更改 div 溢出行为？

Question

我有两个 div 元素，我想将它们放在一个“li”元素的中心。我发现这可以通过使用 flex 布局来完成。我的父 div 具有以下属性:

display: -webkit-flex;
justify-content: center;
align-items: center;

这有效，两个子 div 在“li”内居中。这些是图像和文本元素。但是这有额外的行为，不是我想要的。当屏幕对于一行文本来说太小时，它会覆盖图像。它看起来像下面这样:

我越缩小页面，图像就越消失。有人知道这是怎么回事吗？我该如何解决？

编辑 目前，我正在了解如何添加工作代码片段。现在，我有一张包含内容结构的图片，也许这会有点帮助。

我使用以下 CSS 代码填充图像:

.img_info_icon_png {
   background: url("adapter-images.png") no-repeat -432px -0px;
   width:  24px;
   height: 24px;
}

虽然宽度设置为“24px”，但它会在浏览器中发生变化。

编辑 以下网址指向具有相同行为的示例:https://jsfiddle.net/Lkpxhux0/

Answer 1

由于 flex-shrink 默认为 1，它允许元素在不适合其父元素时收缩。

将 flex-shrink: 0 添加到 .img_info_icon_png 规则。

.outer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.outer .image {
   background: url(http://placehold.it/50/f00) no-repeat;
   width:  24px;
   height: 24px;
   flex-shrink: 0;
}

<div class="outer">
  <div class="image"></div>
  <div class="text">
    This is some text that should not overlap the left aligned image
  </div>
</div>