Question

我正在设计一个网页，其中<figure>个元素会动态添加到flexbox中。这些图每个都包含一个可以是任何大小和宽高比以及<figcaption>的图像。 flexbox有justify-contents: space-between，我的意图是它应该填充无限数量的水平排列，均匀间隔的数字。以下代码在Firefox上完美运行（至少据我所知）：

<html>
<head>
    <style>
        div {
            display: flex;
            justify-content: space-between;
        }
        figure {
            background-color: teal;
        }
        img {
            max-width: 25vmax;
            max-height: 25vmax;
        }
    </style>
</head>
<body>
    <div>
        <figure>
            <img src="http://placekitten.com/g/800/600">
            <figcaption>
                Caption goes here
            </figcaption>
        </figure>
    </div>
</body>
</html>

有一个动态添加新数据的脚本，如下所示：http://codepen.io/anon/pen/jEzyyo。

问题是为了给新数字留出空间，Chrome会缩小div中所有数字的宽度（尽管数字的内容没有变化，这就是我想要的），因此间距被抛弃了图像最终重叠。我怎么能绕过这个？

Answer 1

而不是

 div {
        display: flex;
        justify-content: space-between;
    }

使用此CSS：

div {
    display: inline-flex;
    justify-content: space-between;
}

Chrome会将图元素添加到弹性框中时缩小图形元素

1 个答案: