flex: n с разными n элементов

Question

Я создаю компонент кругов и линий и пытаюсь лучше понять, как flex box делает свое волшебство. В частности, flex: n.

Визуально, в трех версиях одинаковое количество предметов, первая выглядит нормально? тогда как другие два не масштабируются.

Что ломает это?

Как это исправить?

      .chart {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 15px;
        margin-bottom: 50px;
      }
      .dot-black {
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: black;
      }

      .dot-grey {
        width: 22px;
        height: 22px;
        border-radius: 11px;
        background: grey;
      }

      .dot-green {
        width: 22px;
        height: 22px;
        border-radius: 11px;
        background: green;
      }

      .line-black {
      	height: 2px;
      	background: black;
      	flex: 1;
      }

      .line-grey {
      	height: 2px;
      	background: grey;
      	flex: 1;
      }

      .gradient {
    		display: flex;
    		opacity: 0.2;
    		flex: 6;
    		align-items: center;
      }

    <div class="chart">
      <div class="gradient" style="flex: 1">
        <span class="dot-black"></span>      
        <span class="line-black"></span>   
        <span class="dot-grey"></span> 
      </div>  
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>    
    </div>

    <div class="chart">
      <div class="gradient" style="flex: 1">
        <span class="dot-black"></span>      
        <span class="line-black"></span>   
        <span class="dot-grey"></span> 
        <span class="line-grey"></span>
        <span class="dot-grey"></span>  
      </div>       
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>    
    </div>

    <div class="chart">
      <div class="gradient" style="flex: 2">
        <span class="dot-black"></span>      
        <span class="line-black"></span>   
        <span class="dot-grey"></span> 
        <span class="line-grey"></span>
        <span class="dot-grey"></span>  
      </div>       
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>    
    </div>

Answer 1

Flex: 1 означает, что каждый элемент занимает равное разделение доступного пространства во flexbox.У вас есть различное количество элементов внутри контейнера с классом gradient, который имеет flex: 1 и обрабатывается как только один дочерний элемент из chart flexbox.Это означает, что во втором примере вы сжимаете два набора линий / точек в пространство, предназначенное для одного, но общий размер каждого гибкого блока больше, потому что меньше дочерних элементов.

Небольшое расхождение в3-е вызвано статическими размерами точечных элементов.Наличие линии flex: 1 и статической точки занимает flex: 1 ширину + ширину точки.Помещение линии и точки в контейнер flex: 1 означает, что оно занимает только пространство, выделенное для четного деления.В первом примере вы заметите, что по этой причине первый сегмент немного меньше.

Одно из решений - сгруппировать все, что вы хотите, чтобы они были одинакового размера, в контейнеры, к которым применяется flex: 1, и контролировать прозрачность /стили с другим классом.

Я сделал пример здесь .