作者：Th川_546 | 来源：互联网 | 2023-02-13 14:51
我想绘制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;
}
1> Stickers..：
删除容器和项目上的固定像素,使用百分比来使其响应.你仍然可以使用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;
}
2> Gevorg Hakob..：
不要让它变得如此复杂.你只需要将宽度放在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%;
}
京公网安备 11010802041100号