在文本周围创建一个完美的圆圈，同时使用 flex 和 flex-basis 来定位元素

Question

我有这个HTML页面，我正试图在两行上放置8个完美的圆圈。(每个4个(

我使用flexbox实现了这一点，但之后我的圈子就会被打破。我预计会发生这种情况，因为我没有固定的宽度和高度——但问题是，圆的尺寸不能固定，因为它们是根据弹性基础设置的。

这是代码：

.content-achievements {
width: 100%;
height: 30rem;
position: relative;
border: 1px solid black;
border-radius: 25px;
margin-left: 1.5rem;
text-align: center;
}
.achievements-title {
border: 1px solid black;
border-radius: 1.5rem;
width: 95%;
margin: 1.5rem auto;
height: 2.5rem;
line-height: 2.5rem;
}
.achievements-list {
border: 1px solid black;
width: 95%;
text-align: center;
margin: 0 auto;
border-radius: 1.5rem;
margin-bottom: 1rem;
}
.achievements-items {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
gap: 20px;
margin: 1rem 0;
}
.achievements-item {
display: inline-block;
flex-basis: 20%;
border-radius: 50%;
border: 1px solid #000;
line-height: 2rem;
}

<div class="content-achievements">
<div class="achievements-title">
Game Achievements
</div>
<div class="achievements-list">
<ul class="achievements-items">
<li class="achievements-item">achiev1</li>
<li class="achievements-item">achiev2</li>
<li class="achievements-item">achiev3</li>
<li class="achievements-item">achiev4</li>
<li class="achievements-item">achiev5</li>
<li class="achievements-item">achiev6</li>
<li class="achievements-item">achiev7</li>
<li class="achievements-item">achiev8</li>
</ul>
</div>
</div>

如何在保持此布局的同时修复圆？

谢谢。

Answer 1

可以使用圆形项目的CSS属性纵横比来完成：

.achievements-item {
aspect-ratio: 1;
}

并相应地调整主容器的高度以适应其新的动态内容物高度：

.content-achievements {
...
height: auto;
...
}

Answer 2

尝试在其内部使用flexbox使用网格来更好地指定它所使用的行和列：

.achievements-list{
display:flex; 
justify-content:center;
justify-items:center;
border:1px solid black;
width:95%;
text-align:center;
margin:0 auto;
border-radius:1.5rem;
margin-bottom:1rem;
}
.achievements-items{
display: grid;
grid-template-columns: auto auto auto auto;
gap: 50px;
margin: 1rem 0;
}
.achievements-item{
list-style-type: none;
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid #000;
line-height: 2rem;
}

Answer 3

在没有aspect-ratio的时候，甚至现在，由于它还没有得到广泛支持，一种常见的方法是制作三个元素而不是一个元素，并使用padding-bottom技巧。您可以看到，当您以百分比设置padding时，它是相对于包含块的宽度计算的。垂直填充(顶部/底部(也是如此，水平填充(右侧/左侧(也是如此。这意味着如果设置CCD_ 4；100%"；将等于父容器的宽度，而不是高度。所以我们可以这样做：

• 外部元素——定义width
• 中间元素——通过padding-bottom定义height，也具有position: relative
• 内部元素--保存内容，也有position: absolute

下面我为每个li添加了两个span标签，并应用了这个技巧。

* {
margin: 0;
box-sizing: border-box;
}
.content-achievements {
width: 100%;
height: 30rem;
position: relative;
border: 1px solid black;
border-radius: 25px;
text-align: center;
}
.achievements-title {
border: 1px solid black;
border-radius: 1.5rem;
width: 95%;
margin: 1.5rem auto;
height: 2.5rem;
line-height: 2.5rem;
}
.achievements-list {
border: 1px solid black;
width: 95%;
text-align: center;
margin: 0 auto;
border-radius: 1.5rem;
margin-bottom: 1rem;
}
.achievements-items {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
gap: 20px;
margin: 1rem 0;
}
.achievements-item {
display: inline-block;
flex-basis: 20%;
line-height: 2rem;
position: relative;
}
.achievements-item>span {
position: relative;
display: block;
padding-bottom: 100%;
border-radius: 50%;
border: 1px solid #000;
}
.achievements-item>span>span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

<div class="content-achievements">
<div class="achievements-title">
Game Achievements
</div>
<div class="achievements-list">
<ul class="achievements-items">
<li class="achievements-item"><span><span>achiev1</span></span></li>
<li class="achievements-item"><span><span>achiev2</span></span></li>
<li class="achievements-item"><span><span>achiev3</span></span></li>
<li class="achievements-item"><span><span>achiev4</span></span></li>
<li class="achievements-item"><span><span>achiev5</span></span></li>
<li class="achievements-item"><span><span>achiev6</span></span></li>
<li class="achievements-item"><span><span>achiev7</span></span></li>
<li class="achievements-item"><span><span>achiev8</span></span></li>
</ul>
</div>
</div>

Answer 4

为所有圆形元素设置相同的高度和宽度的静态大小：

.achievements-items {
width: 40px;
height: 40px;
}