Html 具有固定宽度元素的Flexbox
我有一个包含在Flexbox中的金字塔形状的图像。只要图像的宽度是固定的，它就可以正常工作。如果我调整屏幕大小（或将其更改为更小的分辨率），因为它是Flexbox，基本项（较低的行）的空间将更小，并且将缩小 理想情况下，我希望基本项目有一个动态的基本大小（屏幕越小，项目越小），但是上面行上的项目大小应该在较低的行上索引，并且具有相同的大小 下面是我想要实现的一个例子： 一旦调整浏览器的大小（或分辨率过低），棱锥体的格式就不正确（例如，项目越高，它就越大，这是不需要的） 不确定，我想实现的只是CSS，但我愿意接受任何建议 示例代码供参考：Html 具有固定宽度元素的Flexbox,html,css,flexbox,width,Html,Css,Flexbox,Width,我有一个包含在Flexbox中的金字塔形状的图像。只要图像的宽度是固定的，它就可以正常工作。如果我调整屏幕大小（或将其更改为更小的分辨率），因为它是Flexbox，基本项（较低的行）的空间将更小，并且将缩小 理想情况下，我希望基本项目有一个动态的基本大小（屏幕越小，项目越小），但是上面行上的项目大小应该在较低的行上索引，并且具有相同的大小 下面是我想要实现的一个例子： 一旦调整浏览器的大小（或分辨率过低），棱锥体的格式就不正确（例如，项目越高，它就越大，这是不需要的） 不确定，我想实现的只是CS
.row{
保证金：0自动；
显示器：flex；
柔性包装：nowrap；
证明内容：中心；
}
.项目{
显示：内联块；
}
img{
宽度：50%；
}
<style>
.row {
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.item {
display: inline-block;
}
img {
width: 5vw;
margin-left: 2.5vw;
margin-right: 2.5vw;
}
</style>
.行{
保证金：0自动；
显示器：flex；
柔性包装：nowrap；
证明内容：中心；
}
.项目{
显示：内联块；
}
img{
宽度：5vw；
左边距：2.5vw；
右边距：2.5vw；
}
：根目录{
--r:5；/*行数*/
}
身体{
保证金：0；
文本对齐：居中；
}
.集装箱{
显示：内联flex；
弯曲方向：立柱；
}
.行{
填充：0；
保证金：0自动；
显示器：flex；
列表样式：无；
}
img{
宽度：50%；
}
.行：非（：最后一个子项）{
宽度：0；
}
/*您可以使用SASS/LESS轻松生成以下内容*/
.row:n最后一个子项（2）{min width:calc（100%*（var（--r）-1）/var（--r））；}
.行：第n个最后一个子项（3）{最小宽度：计算（100%*（var（--r）-2）/var（--r））；}
.row:n最后一个子项（4）{min width:calc（100%*（var（--r）-3）/var（--r））；}
.行：第n个最后一个子项（5）{最小宽度：计算（100%*（var（--r）-4）/var（--r））；}
.行：第n个最后一个子项（6）{最小宽度：计算（100%*（var（--r）-5）/var（--r））；}
.行：第n个最后一个子项（7）{最小宽度：计算（100%*（var（--r）-6）/var（--r））；}
.行：第n个最后一个子项（8）{最小宽度：计算（100%*（var（--r）-7）/var（--r））；}
.row:n最后一个子项（9）{最小宽度：计算（100%*（var（--r）-8）/var（--r））；}
/*.row:N最后一个子项（N）{min width:calc（100%*（var（--r）-（N-1））/var（--r））；}*/