CSS Flexbox aspect ratio

Question

I hope someone can help me to end my 16 hour search. I have to make

• six responsive squares in a 2 x 3 raster.
• Inside the square there has to be a responsive circle.
• Inside the circle there has to be a centered letter.
• I have to use Flexbox.
• I am not allowed to use Grid and/or tables.
• The squares and circles need to keep their aspect ratio and must fill the container.
• CSS-only

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>

I'm so frustrated I cant figure out what the hell I have to do. Especially because I know how to fix it with GRID.

Thansk for helping in Advance!

Answer 1

It is better to assign different codes to their own sections

• The text is not written inside the circle

• The ratios are not set correctly

• Sizes are not set correctly

I set margin: 10px; and padding: 10px; for better and more clarity.

You might say that circles are not precise and are more like ellipses

This is true because they are measured relative to the screen

They may have different sizes in different sizes

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

If you want the circles and squares to be exactly the exact circle and square, you can measure exactly with px , rem, ...

For example:

.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

You have to give the circles a dedicated width and height, put the letters inside them and define for all flex-items the centering with justify-content and align-items. For the responsiveness you should define width and height of the circle and the font-size with the same responsive dimension, for example vw. The width for the columns isn't necessary.

Working example:

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>