响应的圈子与flexbox连续

Question

我想绘制4个圆圈,所有4个弹性项目,我需要它们与它们所在的容器一起扩展.我已经看到了一些使用的解决方案padding-bottom,但我无法理解它.

我设法得到了我想要的特定结果width和heightflex-items.任何人都可以这样做但没有它并在我的HTML中保持相同的结构？

这是小提琴.

.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

删除容器和项目上的固定像素,使用百分比来使其响应.你仍然可以使用pxfor margin和paddingon项目,因为它在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>

Answer 2

不要让它变得如此复杂.你只需要将宽度放在vw和vw中就像这样简单.NB这适用于flex-direction列你可以在圆圈内放入一个字体大小的文本,它会相应地增长和缩小.

例

    
        .flexbox {
            display:flex;
            flex-drection:row;
            justify-content:center; 
            align-items:center;
            }
    
        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 22vw;
            height: 22vw;
            background-color: RGBA(252, 102, 32, 1);
            border-radius: 100%;
            }

        <div class="flexbox">
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
        </div>