如何拥有一个完美的css圈？

在学习flexbox的过程中，我对拥有完美的CSS圈感到困惑。我该怎么做？目前，我的当前代码的宽度和高度均为100，分别为circle1、circle2和circle3。我不想对他们的身高进行硬编码，而是想让他们的身高反应灵敏。有没有办法在%中画一个完美的圆圈？所以每次调整浏览器大小时它都会缩放

或者媒体查询是解决此问题的唯一选项

谢谢你的帮助

*{
框大小：边框框；
}
html，正文{
身高：100%；
字体系列：无衬线；
字号：100；
}
身体{
显示器：flex；
保证金：0；
弯曲方向：立柱；
}
主要{
显示器：flex；
弹性：10100%；
/*用于内容和侧边栏*/
弯曲方向：行；
}
/*主要*/
#内容{
弹性：1080%；
/*用于标题/徽标和说明*/
显示器：flex；
弯曲方向：立柱；
}
#说明img{
显示：块；
}
#标题{
弹性：105%；
填充：10px；
/*测试*/
显示器：flex；
证明内容：中心；
}
#试验{
显示器：flex；
弯曲方向：行；
}
#收割台h1{
文本对齐：居中；
字号：5em；
填充：0；
保证金：0；
字体系列：“满足”，草书；
}
h1{
字体系列：“满足”，草书；
}
#描述{
弹性：10%；
填充：30px；
显示器：flex；
}
#描述p{
左侧填充：20px；
字体大小：20px；
}
#说明img{
宽度：250px；
高度：250px；
边界半径：50%；
边框：6px实心#db6525；
边框：6px实心#00B2AC；
}
#名字{
字体大小：35px；
颜色：#db6525；
字体系列：“满足”，草书；
}
#测试img{
显示：内联；
垂直对齐：文本顶部；
宽度：100px；
高度：100px；
/*有关以下图像和说明，请参见*/
显示器：flex；
弯曲方向：行；
对齐内容：居中对齐；
对齐项目：居中；
}
#边栏{
弹性：1020%；
/*背景颜色：绿色*/
文本对齐：居中；
线高：90%；
/*对于侧边栏内容*/
显示器：flex；
弯曲方向：立柱；
}
#js{
弹性：1033.33333%；
/*背景色：红色*/
背景色：#db6525；
边框：20px实心#00B2AC；
填充：10px；
}
#js h1{
字体大小：50px；
}
#形式{
弹性：1033.33333%；
/*背景颜色：灰色*/
背景色：#db6525；
边框：20px实心#00B2AC；
填充：10px；
}
#表格h1{
字体大小：50px；
}
#地点{
弹性：1033.33333%；
/*背景色：黄绿色*/
背景色：#db6525；
边框：20px实心#00B2AC；
填充：10px；
}
#站点h1{
字体大小：50px；
}
.圆圈{
弹性：05%；
/*对于内圆*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
}
.圆圈1{
弹性：0133.33333%；
显示器：flex；
证明内容：中心；
}
.圆圈1 h1{
字体大小：12px；
颜色：#fff！重要；
背景色：#db6525；
边框：4px实心#00B2AC；
边界半径：50%；
高度：100px；
宽度：100px；
文本对齐：居中；
垂直对齐：中间对齐；
}
.圆圈2{
弹性：0133.33333%；
显示器：flex；
证明内容：中心；
}
.圆圈2 h1{
字体大小：12px；
颜色：#fff！重要；
背景色：#db6525；
边框：4px实心#00B2AC；
边界半径：50%；
高度：100px；
宽度：100px；
文本对齐：居中；
垂直对齐：中间对齐；
}
.圆圈3{
弹性：0133.33333%；
显示器：flex；
证明内容：中心；
}
.circle3 h1{
字体大小：12px；
颜色：#fff！重要；
背景色：#db6525；
边框：4px实心#00B2AC；
边界半径：50%；
高度：100px；
宽度：100px；
文本对齐：居中；
垂直对齐：中间对齐；
}

我的网站

啁啾
博客
接触
Javascript
迷你JS项目

正在进行的工作
自由形式
欢迎下载表格
文件夹
结合以前的工作和其他站点

更新答案

我将flex容器修改为一个最小的工作示例。弹性项应全部设置为

flex: 1 1 auto /* flex-grow flex-shrink flex-basis */

这允许

circle h1弹性项目

根据需要增长和收缩。在将示例应用于代码时，可能需要使用js从圆的扩展宽度获取圆的高度

希望这有帮助

html，
身体{
保证金：0；
填充：0；
字体系列：无衬线；
}
.圆圈{
/*对于内圆*/
显示器：flex；
证明内容：中心；
身高：100%；
宽度：100%；
}
.circle1，
.circle2，
.圆圈3{
显示器：flex；
flex:1自动；
宽度：33vw；
高度：33vw；
}
.圆圈1 h1，
.圆圈2 h1，
.circle3 h1{
flex:1自动；
宽度：100%；
身高：100%；
字体大小：12px；
颜色：#fff！重要；
背景色：#db6525；
边框：4px实心#00B2AC；
边界半径：50%；
文本对齐：居中；
垂直对齐：中间对齐；
}

啁啾
博客
内容

现在的问题是如何拥有一个完美的响应css正方形？因为当你有一个正方形时，你很容易就会有一个半径为50%的圆。现在你可以在这么多的时间里找到这么多的解决方案。这是一个关于flexbox项目的示例

.柔性容器{
填充：0；
保证金：0；
显示器：flex；
}
.弹性项目{
背景：番茄；
保证金：5px；
颜色：