在将图元素添加到flexbox时，Chrome会缩小图元素 [英] Chrome shrinks figure elements as they are added to a flexbox
问题描述
我正在设计一个网页，其中< 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>
标题在这里
< / figcaption>
< / figure>
< / div>
< / body>
< / html>
有一个脚本动态添加新图形，如下所示： http://codepen.io/anon/pen/jEzyyo 。
问题是，为了给新的数字腾出空间，Chrome会缩小div中所有图形的宽度（虽然图形的内容不变，这是我想要的），因此间距被抛弃，图像结束重叠。
<$ p $ p>
div {
display：flex;
justify-content：space-between;
}
使用此CSS：
div {
display：inline-flex;
justify-content：space-between;
}
I am designing a webpage in which <figure> elements are dynamically added to a flexbox. These figures each contain an image which can be of any size and aspect ratio as well as a <figcaption>. The flexbox has justify-contents: space-between, and it is my intention that it should be populated with an indefinite number of horizontally arranged, evenly-spaced figures. The following code works perfectly on Firefox (at least as far as I can tell):
<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>
There is a script to dynamically add new figures, as demonstrated here: http://codepen.io/anon/pen/jEzyyo.
The issue is that to make room for new figures, Chrome shrinks the width of all the figures in the div (though the content of the figures is unchanged, which is what I want), and so the spacing is thrown off and images end up overlapping. How can I get around this?
Instead of
div {
display: flex;
justify-content: space-between;
}
Use this CSS:
div {
display: inline-flex;
justify-content: space-between;
}
这篇关于在将图元素添加到flexbox时，Chrome会缩小图元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
