CSS Flex - LI выравнивает каждый второй элемент Flex по максимальной ширине первого элемента

Question

В моем приложении у меня есть что-то вроде этого:

 <ul>
   <li> ... </li>
   <li> ... </li>
   <li> ... </li> 
 </ul>

Каждый <li> имеет display: flex;, и я хотел бы выровнять каждый второй элемент flex на максимальной ширине между всеми первыми элементами,

Чтобы сделать это более понятным, ниже вы найдете картинку, показывающую, чего я пытаюсь достичь:

Что такоесуществующие свойства CSS, с которыми я мог бы поиграть?

РЕДАКТИРОВАТЬ : В соответствии с просьбой ниже вы найдете код из моего текущего углового приложения:

.item1 {
    padding-left: 5px;
    padding-right: 5px;
}

.item2 {
    background-color: yellow;
}

ul {
    list-style: none;
}

li {
    display: flex;
}

<ul>
    <li>
      <a class="item1">tata is magic</a>
      <a class="item2">Control OK</a>
    </li>
    <li>
      <a class="item1">titi is very very slow</a>
      <a class="item2">Control KO</a>
    </li>
    <li>
      <a class="item1">toto</a>
      <a class="item2">Control OK</a>
    </li>
  </ul>

HTML с угловым

<ul>
<li *ngFor="let key of keys">
  <a class="item1">{{key}}</a>
  <span *ngIf="controlExists"><a class="item2">Control OK</a></span>
</li>
</ul>

Answer 1

Не с flexbox, но таблицы CSS могут сделать это, хотя требуется дополнительный диапазон.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

ul {
  display: table;
}

a {
  display: table-cell;
  padding: .5em;
}

span {
  border: 1px solid red;
  border-radius: 1em;
  padding: 0 .5em;
}

ul {
  list-style: none;
}

li {
  display: table-row;
}

.item1 span {
  background: lightblue;
}

.item2 span {
  background: orange;
}

<ul>
  <li>
    <a class="item1"><span>Lorem ipsum</span></a>
    <a class="item2"><span>Control OK</span></a>
  </li>
  <li>
    <a class="item1"><span>Lorem, ipsum dolor.</span></a>
    <a class="item2"><span>Control OK</span></a>
  </li>
  <li>
    <a class="item1"><span>toto</span></a>
    <a class="item2"><span>Control OK</span></a>
  </li>
</ul>

Answer 2

Вы можете использовать table сам или несколько div с display: table.

td {
  padding: 5px;
}

span  {
  display: inline-block;
  padding: 5px;
  background: gray;
  color: white;
  font-family: sans-serif;
}

<table>
  <tr>
    <td>
      <span>First item</span>
    </td>
    <td>
      <span>Just item</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>Item</span>
    </td>
    <td>
      <span>Some item</span>
    </td>
  </tr>
    <tr>
    <td>
      <span>Realy very long item</span>
    </td>
    <td>
      <span>Kek</span>
    </td>
  </tr>
</table>

Answer 3

https://jsfiddle.net/w6mzugc0/14/

Смотрите мою скрипку.Решение состоит в том, чтобы иметь 2 списка, я думаю.Вы должны использовать flex в списках-обёртках и flex в каждом li.

<div class='lists-wrapper'>
  <ul>
     <li> <div class='item1'>11111111111</div> </li>
     <li> <div class='item1'>333333333</div></li>
    <li> <div class='item1'>55</div> </li>
    <li> <div class='item1'>77</div></li>
  </ul>
  <ul>
     <li> <div class='item2'>22222</div> </li>
     <li> <div class='item2'>44</div></li>
    <li> <div class='item2'>666</div> </li>
    <li> <div class='item2'>888888</div></li>
  </ul>

</div>

и стилизацию:

li {
  display: flex;
}

.item1 {
    padding: 10px;
    background-color: green;
}

.item2 {
  padding: 10px;
    background-color: yellow;
}

.lists-wrapper {
  display: flex;
}