具有固定宽度元素的 Flexbox

Question

我有一个包含在 Flexbox 中的金字塔形状的图像。只要图像的宽度是固定的，它就可以按预期工作。如果我调整屏幕大小（或将其更改为更小的分辨率），因为它是一个 Flexbox，所以基本项目（下排）将有更少的空间并且会缩小。

理想情况下，我希望为基本项目设置一个动态基本大小（屏幕越小，项目越小），但上面行中的项目大小应该在下一行索引并且具有相同的大小。

这是我想要实现的示例：https://codepen.io/Mantequilla_/pen/WNrWBWW 一旦浏览器调整大小（或分辨率太低），金字塔就会出现畸形（例如，项目越高，它就越大，这是不需要的）。

不确定，我想要实现的目标只能在 CSS 中实现，但我愿意接受任何建议。

示例代码供参考：

.row {
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.item {
  display: inline-block;
}

img {
  width: 50%;
}

<ul class="row">
  <li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
  <li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
  <li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
  <li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>

Answer 1

您可以尝试使用视图宽度。

 <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>

Answer 2

如果行数已知或者你有一个最大值，你可以尝试如下：

:root {
  --r:5; /* number of row */
}
body {
  margin:0;
  text-align:center;
}
.container {
  display:inline-flex;  
  flex-direction:column;
}
.row {
  padding:0;
  margin:0 auto;
  display: flex;
  list-style:none;
}
img {
  width: 50%;
}

.row:not(:last-child) {
  width:0;
}

/* you can easily generate the below using SASS/LESS*/
.row:nth-last-child(2) {min-width:calc(100% * (var(--r) - 1)/var(--r));}
.row:nth-last-child(3) {min-width:calc(100% * (var(--r) - 2)/var(--r));}
.row:nth-last-child(4) {min-width:calc(100% * (var(--r) - 3)/var(--r));}
.row:nth-last-child(5) {min-width:calc(100% * (var(--r) - 4)/var(--r));}
.row:nth-last-child(6) {min-width:calc(100% * (var(--r) - 5)/var(--r));}
.row:nth-last-child(7) {min-width:calc(100% * (var(--r) - 6)/var(--r));}
.row:nth-last-child(8) {min-width:calc(100% * (var(--r) - 7)/var(--r));}
.row:nth-last-child(9) {min-width:calc(100% * (var(--r) - 8)/var(--r));}
/*.row:nth-last-child(N) {min-width:calc(100% * (var(--r) - (N-1))/var(--r));}*/

<div class="container">
<ul class="row">
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
</div>

更多行：

:root {
  --r:7; /* number of row */
}
body {
  margin:0;
  text-align:center;
}
.container {
  display:inline-flex;  
  flex-direction:column;
}
.row {
  padding:0;
  margin:0 auto;
  display: flex;
  list-style:none;
}
img {
  width: 50%;
}

.row:not(:last-child) {
  width:0;
}

/* you can easily generate the below using SASS/LESS*/
.row:nth-last-child(2) {min-width:calc(100% * (var(--r) - 1)/var(--r));}
.row:nth-last-child(3) {min-width:calc(100% * (var(--r) - 2)/var(--r));}
.row:nth-last-child(4) {min-width:calc(100% * (var(--r) - 3)/var(--r));}
.row:nth-last-child(5) {min-width:calc(100% * (var(--r) - 4)/var(--r));}
.row:nth-last-child(6) {min-width:calc(100% * (var(--r) - 5)/var(--r));}
.row:nth-last-child(7) {min-width:calc(100% * (var(--r) - 6)/var(--r));}
.row:nth-last-child(8) {min-width:calc(100% * (var(--r) - 7)/var(--r));}
.row:nth-last-child(9) {min-width:calc(100% * (var(--r) - 8)/var(--r));}
/*.row:nth-last-child(N) {min-width:calc(100% * (var(--r) - (N-1))/var(--r));}*/

<div class="container">
<ul class="row">
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
  <li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
</div>