Выравнивание трех элементов в CSS

Question

Я ищу, чтобы точки были выровнены, зафиксированы и не должны двигаться. Вот как мне нужно, чтобы он выглядел так:

Это то, что у меня так далеко ниже. Как вы можете видеть, если есть двойные цифры, точка движется.

Это то, что я рендеринг на DOM. Как вы можете видеть, я разделил все три элемента на свои собственные.

<div className="Legend-Component col-3" align="center">
   {legendData.map((item, index) => (
       <ul key={index}>
           <li>
             <span className="Legend-Name" onClick={() => this.handleClick(item.assetManagerId)}> 
                {item.name}
             </span>
             <span className={`${item.className[index]}`}></span>
             <span className="Legend-Total">{item.total}</span>
           </li>
        </ul>
    ))}
</div>

My CSS:

.Legend-Component ul {
      list-style-type: none;
      font-size: 12px;
      text-align: right;
      margin: auto;
  }
  .Legend-Name{
    color: #006192;
    cursor: pointer;
  }
  .Legend-Total {
    font-weight: bold;
  }
  .navy {
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: #001f3f;
    border-radius: 50%;
    border: 1px solid grey;
  }
  .blue {
    display: inline-block;
    height: 13px;
    width: 13px;
    background-color: #0074D9;
    border-radius: 50%;
    border: 1px solid grey;
    margin: 0 2px;
  }
  .aqua {
    display: inline-block;
    height: 13px;
    width: 13px;
    background-color: #7FDBFF;
    border-radius: 50%;
    border: 1px solid grey;
    margin: 0 2px;
  }
  .teal {
    display: inline-block;
    height: 13px;
    width: 13px;
    background-color: #39CCCC;
    border-radius: 50%;
    border: 1px solid grey;
    margin: 0 2px;
  }

Answer 1

Существует 2 подходящих решения:

1. Расположение таблицы:

1-й столбец: выравнивание по правому краю

2-й столбец: выравнивание по центру , фиксированная ширина

3-я: по левому краю

2. Расположение Flexbox для каждой строки:

css:

.flex-row {
display: flex;
flex-direction: end;
justify-content: center;
}

js:

 legendData.map((item, index) => (
        <ul key={index}>
          <li>
            <div class="flex-row">
               ----- col 1 -----
               ----- col 2 -----
               ----- col 3 -----
            </div>
          </li>
        </ul>
        ))

Answer 2

Сделать каждый элемент списка элементом flex. Разрешить левому и правому элементам заполнить доступное пространство с помощью flex: 1.

. Круги будут центрированы.

ul {
  list-style: none;
  padding: 0;
}

.circle {
    display: inline-block;
    height: 13px;
    width: 13px;   
    border-radius: 50%;
    border: 1px solid grey;
    margin: 0 2px;
}

.blue {
  background-color: #0074D9;
}

/* The important bits... */

.legend-item {
  display: flex;
}

.legend-name {
  flex: 1;
  text-align: right;
}

.legend-total {
  flex: 1;
}

<div className="Legend-Component col-3">
  <ul key={index}>
    <li class="legend-item">
      <span class="legend-name"> 
        Legend Name
      </span>
      <span class="circle blue"></span>
      <span class="legend-total">00</span>
    </li>
    <li class="legend-item">
      <span class="legend-name"> 
        Legend Name
      </span>
      <span class="circle blue"></span>
      <span class="legend-total">000</span>
    </li>
    <li class="legend-item">
      <span class="legend-name"> 
        Legend Name Long
      </span>
      <span class="circle blue"></span>
      <span class="legend-total">0</span>
    </li>
  </ul>
</div>

Если вам нужно выровнять круги вне центра, возможно, вам придется сыграть с flex-basis:

ul {
  list-style: none;
  padding: 0;
}

.circle {
    display: inline-block;
    height: 13px;
    width: 13px;   
    border-radius: 50%;
    border: 1px solid grey;
    margin: 0 2px;
}

.blue {
  background-color: #0074D9;
}

/* The important bits... */

.legend-item {
  display: flex;
}

.legend-name {
  flex: 1;
  flex-basis: 100%;
  text-align: right;
}

.legend-total {
  flex: 1;
  flex-basis: 50px;
}

<div className="Legend-Component col-3">
  <ul key={index}>
    <li class="legend-item">
      <span class="legend-name"> 
        Legend Name
      </span>
      <span class="circle blue"></span>
      <span class="legend-total">00</span>
    </li>
    <li class="legend-item">
      <span class="legend-name"> 
        Legend Name
      </span>
      <span class="circle blue"></span>
      <span class="legend-total">000</span>
    </li>
    <li class="legend-item">
      <span class="legend-name"> 
        Legend Name Long
      </span>
      <span class="circle blue"></span>
      <span class="legend-total">0</span>
    </li>
  </ul>
</div>