CSS Flexbox 纵横比

Question

我希望有人可以帮助我结束 16 小时的搜索。我必须做

• 2 x 3 栅格中的六个响应式正方形。
• 在正方形内必须有一个响应圈。
• 圆圈内必须有一个居中的字母。
• 我必须使用 Flexbox。
• 我不允许使用网格和/或表格。
• 正方形和圆形需要保持它们的纵横比并且必须填满容器。
• 仅 CSS

div {
  display: flex;
  flex: 1;
  justify-content: space-between;
  font-size: 10rem;
}

.blokrij {
  flex-direction: column;
  width: 50%;
}

.vierkant {
  background-color: hsla(26, 100%, 50%, 1.00);
  flex: 1 1 auto;
  max-width: 100%;
  border-radius: 10%;
  margin 1px;
}

.rond {
  background-color: blue;
  border-radius: 50%;
}

<div class="container">
  <div class="blokrij">
    <div class="vierkant">
      <div class="rond"></div>L</div>
    <div class="vierkant">
      <div class="rond"></div>O</div>
    <div class="vierkant">
      <div class="rond"></div>I</div>
  </div>
  <div class="blokrij">
    <div class="vierkant">
      <div class="rond"></div>L</div>
    <div class="vierkant">
      <div class="rond"></div>O</div>
    <div class="vierkant">
      <div class="rond"></div>I</div>
  </div>
</div>

我很沮丧，我不知道我到底要做什么。尤其是因为我知道如何使用 GRID 来修复它。

感谢您提前提供帮助！

Answer 1

最好给自己的部分分配不同的代码

• 文字没有写在圆圈内

• 比例设置不正确

• 尺寸设置不正确

我设置margin: 10px; 和padding: 10px; 是为了更好、更清晰。

你可能会说圆并不精确，更像是椭圆

这是正确的，因为它们是相对于屏幕测量的

它们可能有不同尺寸的不同尺寸

.container{
  width:100%;
  height: 100vh;
  display: flex;
}
.blokrij {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
}

.vierkant {
  background-color: hsla(26, 100%, 50%, 1.00);
  border-radius: 10%;
  margin 1px;
  height: 100%;
  margin: 10px;
  padding: 10px;
}

.rond {
  height: 100%;
  background-color: blue;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10rem;
}

<div class="container">
  <div class="blokrij">
    <div class="vierkant">
      <div class="rond">L</div>
    </div>
    <div class="vierkant">
      <div class="rond">O</div>
    </div>
    <div class="vierkant">
      <div class="rond">I</div>
    </div>
  </div>
  <div class="blokrij">
    <div class="vierkant">
      <div class="rond">L</div>
    </div>
    <div class="vierkant">
      <div class="rond">O</div>
      </div>
        <div class="vierkant">
          <div class="rond">I</div>
        </div>
    </div>
  </div>

如果您希望圆形和正方形完全是圆形和正方形，您可以使用 px 、 rem 进行精确测量...

例如：

.container{
  width:400px;
  height: 400px;
  display: flex;
}
.blokrij {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
}

.vierkant {
  background-color: hsla(26, 100%, 50%, 1.00);
  border-radius: 10%;
  margin 1px;
  height: 100%;
  margin: 5px;
  padding: 5px;
}

.rond {
  height: 100%;
  background-color: blue;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10rem;
}

<div class="container">
  <div class="blokrij">
    <div class="vierkant">
      <div class="rond">L</div>
    </div>
    <div class="vierkant">
      <div class="rond">O</div>
    </div>
    <div class="vierkant">
      <div class="rond">I</div>
    </div>
  </div>
  <div class="blokrij">
    <div class="vierkant">
      <div class="rond">L</div>
    </div>
    <div class="vierkant">
      <div class="rond">O</div>
      </div>
        <div class="vierkant">
          <div class="rond">I</div>
        </div>
    </div>
  </div>

Answer 2

你必须给圆一个专门的宽度和高度，把字母放在里面，并用justify-content和align-items为所有弹性项目定义居中。对于响应性，您应该定义圆圈的宽度和高度以及具有相同响应尺寸的字体大小，例如vw。列的宽度不是必需的。

工作示例：

div {
  display: inline-flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 10vw;
}

.blokrij {
  flex-direction: column;
}

.vierkant {
  background-color:hsla(26,100%,50%,1.00);
  border-radius: 10%;
  margin: 1px;
}

.rond {
  width: 20vw;
  height: 20vw;
  background-color: blue;
  border-radius: 50%;
}

<div class="container">
    <div class="blokrij">
        <div class="vierkant">
            <div class="rond">L</div>
        </div>
        <div class="vierkant">
            <div class="rond">O</div>
        </div>
        <div class="vierkant">
            <div class="rond">I</div>
        </div>
    </div>
    <div class="blokrij">
        <div class="vierkant">
            <div class="rond">L</div>
        </div>
        <div class="vierkant">
            <div class="rond">O</div>
        </div>
        <div class="vierkant">
            <div class="rond">I</div>
        </div>
    </div>
</div>