Ответственные круги в строке с flexbox

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

Удалить фиксированные пиксели как на контейнере и предметы, использовать процент вместо того, чтобы сделать его отзывчивым. Вы по-прежнему можете использовать px для margin и padding на деталях, так как он находится под flexbox.

Используйте псевдо элемент с 100% из padding-top или padding-bottom, так padding относительно ширины контейнера, так что вам реагирующие равной ширины и высоты элементов.

.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 и height в vw как Это просто. N.B это работает с колонкой flex-direction Вы можете поместить текст с размером шрифта в 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>