我使用flexbox排列了圆圈,它们在小屏幕宽度上看起来不错:
但是当我加宽屏幕的宽度时,它们看起来非常紧张。但是我需要它们来自每一个前景。
我不确定是否有办法可以修复不同屏幕尺寸的显示效果。也许我可以使用一些媒体查询。如何处理?
HTML
<div class="dashboard-grey-menu">
<div class="flex row no-padding">
<div class="col"><div class="circle"></div></div>
<div class="col"><div class="circle"></div></div>
<div class="col"><div class="circle"></div></div>
<div class="col"><div class="circle"></div></div>
</div>
</div>
CSS
.dashboard-grey-menu {
height: 30vh;
background-color: #959595;
}
.circle {
border-radius: 50%;
width: 15vw;
height: 25vh;
background-color: #B7B7B7;
margin: auto;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 30vh;
width: 100%;
}
答案 0 :(得分:7)
您必须将圈子的width
和height
设置为相同的值:
.dashboard-grey-menu {
height: 30vh;
background-color: #959595;
}
.circle {
border-radius: 50%;
width: 10vw;
height: 10vw;
background-color: #B7B7B7;
margin: 20px;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 30vh;
width: 100%;
}
&#13;
<ion-content has-header="false">
<div class="dashboard-grey-menu">
<div class="flex row no-padding">
<div class="col"><div class="circle"></div></div>
<div class="col"><div class="circle"></div></div>
<div class="col"><div class="circle"></div></div>
<div class="col"><div class="circle"></div></div>
</div>
</div>
</ion-content>
&#13;