html - 使用 flexbox 连续响应圆圈

Question

我想画 4 个圆圈，全部是 4 个 flex 元素，我需要它们随着它们所在的容器缩放。我已经看到一些使用 padding-bottom 的解决方案，但是我真的无法理解。

我设法通过 flex 元素中的特定 width 和 height 获得了我想要的结果。任何人都可以做同样的事情但没有它并在我的 HTML 中保持相同的结构吗？

This is the fiddle.

.container {
  display: flex;
  flex-wrap: nowrap;
  width: 200px;
  height: 50px;
}
.holder {
  margin-right: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.h1 {
  background: blue;
}
.h2 {
  background: red;
}
.h3 {
  background: green;
}
.h4 {
  background: grey;
}

<div class="container">
  <div class="holder h1"></div>
  <div class="holder h2"></div>
  <div class="holder h3"></div>
  <div class="holder h4"></div>
</div>

Answer 1

移除容器和元素上的固定像素，改为使用百分比来使其响应。您仍然可以对元素使用 px 作为 margin 和 padding，因为它在 flexbox 下。

使用 100% padding-top 或 padding-bottom 的伪元素，因为 padding 是相对于容器的宽度，以便为您提供响应相等的宽度和高度元素。

.container {
  display: flex;
}
.holder {
  flex: 1;
  margin: 1%;
  border-radius: 50%;
}
.holder:before {
  content: "";
  display: inline-block;
  padding-top: 100%;
}
.h1 {
  background: blue;
}
.h2 {
  background: red;
}
.h3 {
  background: green;
}
.h4 {
  background: grey;
}

<div class="container">
  <div class="holder h1"></div>
  <div class="holder h2"></div>
  <div class="holder h3"></div>
  <div class="holder h4"></div>
</div>