我想画 4 个圆圈,全部是 4 个 flex 元素,我需要它们随着它们所在的容器缩放。我已经看到一些使用 padding-bottom
的解决方案,但是我真的无法理解。
我设法通过 flex 元素中的特定 width
和 height
获得了我想要的结果。任何人都可以做同样的事情但没有它并在我的 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>
最佳答案
移除容器和元素上的固定像素,改为使用百分比来使其响应。您仍然可以对元素使用 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>
关于html - 使用 flexbox 连续响应圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41943135/