【发布时间】：2020-08-01 05:35:05
【问题描述】：
我正在尝试使用 flexbox 在容器中水平居中显示可变数量的图像图标。
- 单个图标应缩放到容器高度并水平居中。
- 应将少量图标缩放到容器高度并直接相邻并居中绘制。
- 如果图标多于容器高度水平无法容纳的图标，则应缩放它们以使其适合而不改变其纵横比。
我在 (1) 和 (3) 上都成功了，但是 (2) 给我带来了麻烦。图像不会彼此相邻绘制。这是它的样子：
这是产生该输出的 HTML 文档 (also jsfiddle)：
<!DOCTYPE html>
<style>
.flex-container {
display: flex;
justify-content: center;
width: 2in;
height: 0.5in;
background: lightblue;
margin-bottom: 1em;
}
.flex-item {
flex: 1 1;
height: 100%;
width: auto;
object-fit: contain;
}
.block-container {
width: 2in;
height: 0.5in;
background: lightblue;
margin-bottom: 1em;
text-align: center;
}
</style>
<body>
One item displays centered at container height.
<div class="flex-container">
<svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(72.198 -89.402)">
<circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
</g>
</svg>
</div>
Many items get scaled to fit in the box, which is
what I want. The image aspect ratio correctly remains
unchanged.
<div class="flex-container">
<svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(72.198 -89.402)">
<circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
</g>
</svg>
<svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(72.198 -89.402)">
<circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
</g>
</svg>
<svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(72.198 -89.402)">
<circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
</g>
</svg>
<svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(72.198 -89.402)">
<circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
</g>
</svg>
<svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(72.198 -89.402)">
<circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
</g>
</svg>
</div>
But if there are not enough images to fill the container
then I want the images adjacent and centered. Instead
they are distributed.
<div class="flex-container">
<svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(72.198 -89.402)">
<circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
</g>
</svg>
<svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(72.198 -89.402)">
<circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
</g>
</svg>
</div>
This is what the above case should look like, but it
doesn't use flexbox so it won't scale properly with
many items.
<div class="block-container">
<svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(72.198 -89.402)">
<circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
</g>
</svg><svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(72.198 -89.402)">
<circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
</g>
</svg>
</div>
</body>
我真的认为justify-content: center 完全适合这种情况，但我无法让它发挥作用。我觉得我错过了一些明显的东西。谁能指出来？
【问题讨论】：
-
您的 HTML 代码无效 -- 没有
<html>元素，<style>应该在<head>元素内。 -
@Manjuboyz 是的，我希望第三张和第四张图片看起来一样，但使用了 flexbox。你的答案很好，只是稍晚一点，没有接受答案的解释。