Responsive Kreise in einer Reihe mit flexbox

Question

Ich möchte 4 Kreise zeichnen, alle 4 flex-Elemente, und ich muss sie mit dem Container skalieren, in denen sie sind. Ich habe einige Lösungen gesehen, wo padding-bottom verwendet wird, aber ich kann Verstehe es wirklich nicht.

Ich schaffte es, das Ergebnis, das ich mit spezifischen width und height in den Flex-Elementen will. Kann jemand das Gleiche tun, aber ohne das und die gleiche Struktur in meinem HTML behalten?

This is the fiddle.

.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

entfernen die festen Pixeln sowohl auf dem Behälter und Gegenstände, Prozentsatz stattdessen verwenden, um es als Reaktion zu machen. Sie können immer noch px für margin und padding auf den Elementen verwenden, da es unter flexbox ist.

ein Pseudoelement mit 100% von padding-top oder padding-bottom verwenden, da padding an der Behälterbreite relativ ist, so dass sie in Reaktion die gleiche Breite und Höhe Elemente geben.

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

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

Sie es nicht so kompliziert machen. Sie müssen nur die Breite in vw und Höhe in vw wie setzen Dies ist einfach. N. Dies funktioniert mit Flex-Richtung Spalte Sie können einen Text mit Schriftgröße in Vw innerhalb des Kreises und es wird entsprechend wachsen und verkleinern.

Beispiel

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

 <div class="flexbox"> 
 
     <div class="item">text</div> 
 
     <div class="item">text</div> 
 
     <div class="item">text</div> 
 
     <div class="item">text</div> 
 
     </div>