Question

我想绘制4个圆圈，全部是4个弹性项目，我需要它们与它们所在的容器一起扩展。我已经看到了一些使用padding-bottom的解决方案，但我不能真的理解它。

我设法通过flex-items中的特定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>

Answer 1

不要让它如此复杂。你只需要将宽度设置为vw和vw就像这很简单。 N.B这适用于flex-direction列你可以在圆圈内放入一个字体大小的文字，它会相应地增长和缩小。

例如

Sub Cutsheets()
    Application.ScreenUpdating = False
    On Error GoTo whoa

    Dim I As Integer
    Dim finalrow As Integer
    Dim pdfPath As String

    'loop through the rows to find PDFs
    With Sheet1
        finalrow = .Cells(.Rows.Count, 1).End(xlUp).Row
        For I = 9 To finalrow
            pdfPath = "P:\ESO\1790-ORL\OUC\_Materials\Material Cutsheets\" & Cells(I, 1).Value & ".pdf"
            Call OpenAnyFile(pdfPath)
        Next I
    End With

whoa:
    Application.ScreenUpdating = True

End Sub

    
        .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%;
            }

Answer 2

删除容器和项目上的固定像素，使用百分比来使其响应。您仍然可以对px和margin使用padding项，因为它位于flexbox下。

使用100% padding-top或padding-bottom的伪元素，因为padding相对于容器的宽度，因此可以提供相等宽度的响应和身高项目。

＆＃13;

.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;
}

＆＃13;

<div class="container">
  <div class="holder h1"></div>
  <div class="holder h2"></div>
  <div class="holder h3"></div>
  <div class="holder h4"></div>
</div>

＆＃13;

响应的圈子与flexbox连续

2 个答案: