具有固定宽度元素的 Flexbox

Question

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

理想情况下，我希望基本项目有一个动态的基本尺寸（屏幕越小，项目越小），但是上面几行的项目尺寸应该在下面的行中索引并且有大小一样。

这是我想要实现的示例：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>

具有固定宽度元素的 Flexbox

Flexbox with fixed width elements

html

css

width

flexbox