フレックスボックスを使用した一連の応答円

Question

4つの円を描画したい、4つのフレックスアイテムすべてを描画したいのですが、それらが入っているコンテナでスケーリングする必要があります。padding-bottomが使用されています。それは本当に分かりません。

フレックスアイテムに具体的なwidthとheightという結果を得ることができました。誰でも同じことをすることができますが、私のHTMLに同じ構造を維持することはできますか？

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

コンテナとアイテムの両方に固定ピクセルを削除し、それが応答にする代わりにパーセントを使用しています。フレックスボックスの下にあるので、marginとpaddingにはpxを使用できます。 paddingは、コンテナの幅を基準にしているので

はそうあなたに応答等しい幅と高さのアイテムを与えること、padding-topの100%またはpadding-bottomと擬似要素を使用します。

.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

それは非常に複雑にしないでください。 あなたはちょうど のようなvwと高さの幅で幅を入れておく必要があります。 N.Bこれはフレックス方向の列で動作します font-sizeのテキストを円の中にvwで置くことができます。それに応じて拡大縮小します。

例

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