CSS Flexbox 纵横比

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>

Answer 3

I am pretty busy with the same subject, and I have the same question as above. I would like to know if the answers for 'Kopshot' were helpfull. The squares must stay in the same form. I am not allowed to use grid. It has to be responsive from size 320 untill 1044 pixels. I've tried to use percentages, and also aspect-ratio in CSS but it doesnt work. It has to move fluidly. And the squires have to grow to fill the gap, so I don't think fixed sizes are the answer. The images how it should look. I see that the snippet doesnt look right, the images are what it looks likes on my computer.

Thanks if anyone can help me.....

 .Letterblokjes_blok { margin: auto; display: flex; } @media screen and (min-width:1024px) {.Letterblokjes_blok { margin: auto; display: flow-root; inline-size: 100%; } }.blokjes { display: flow-root; margin: 0; inline-size: 49%; } @media screen and (min-width:768px) {.blokjes { display: flow-root; margin: 0; inline-size: 49%; float: left; } } @media screen and (min-width:1024px) {.blokjes, .blokjes2 { display: flex; flex-direction: row; justify-content: space-between; margin: 0; inline-size: 100%; } }.blokjes2 { float: right; } @media screen and (min-width:768px) {.blokjes2 { float: right; } }.letterblokje, .letterblokje2 { display: flex; float: left; inline-size: 148px; block-size: 148px; margin: 0 0 9px 0; background-color: cornflowerblue; justify-content: center; align-items: center; border-radius: 20%; border: 2px black solid; }.letterblokje2 { float: right; } @media screen and (min-width:768px) {.letterblokje, .letterblokje2 { inline-size: 360px; block-size: 360px; margin: 0 0 30px 0; } } @media screen and (min-width:1024px) {.letterblokje, .letterblokje2 { inline-size: 320px; block-size: 320px; margin: 0 0 21px 0; } } @media screen and (min-width:1044px) {.letterblokje, .letterblokje2 { inline-size: 330px; block-size: 330px; margin: 0 0 21px 0; } }.cirkel { display: flex; border:0.3px solid rgba(220, 220, 220); border-radius: 50%; inline-size: 90%; block-size: 90%; background-color: rgba(200, 200, 200); box-shadow: 0em 0em 0.4em 0.05em rgb(150, 150, 150) inset; align-items: center; justify-content: center; font: 700 60px 'Cabin Sketch', cursive; color: cornflowerblue; font-size: 80px; padding: 30px; } @media screen and (min-width:1044px) { body { inline-size: 1032px; margin:8px auto; } }

 <section class="Letterblokjes_blok"> <article class=blokjes> <div class="letterblokje"><div class="cirkel">L</div></div> <div class="letterblokje"><div class="cirkel">O</div></div> <div class="letterblokje"><div class="cirkel">I</div></div> </article> <article class="blokjes2"> <div class="letterblokje2"><div class="cirkel">L</div></div> <div class="letterblokje2"><div class="cirkel">O</div></div> <div class="letterblokje2"><div class="cirkel">I</div></div> </article> </section>