我正在尝试使用 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 正是针对这种情况的，但我无法让它发挥作用。我觉得我错过了一些明显的东西。有人可以指出吗？
最佳答案
实际上，您只需删除 flex:1 1;，因为它会使图像占用可用空间。
jsfiddle 示例:https://jsfiddle.net/gzxu5va8/2/
CSS:
.flex-container {
display:flex;
flex-direction:row;
justify-content:center;
width: 2in;
height: 0.5in;
background: lightblue;
margin-bottom: 1em;
}
.flex-item {
height: 100%;
width: auto;
display:flex;
flex-direction:row;
justify-content:center;
}
.block-container {
width: 2in;
height: 0.5in;
background: lightblue;
margin-bottom: 1em;
display:flex;
flex-direction:row;
justify-content:center;
}
关于css - 使用 flexbox 将相邻图像居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61293274/