CSS Flex - LI 在第一个项目最大宽度上对齐每个第二个弹性项目

Question

在我的申请中有类似的内容：

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

每个 <li> 都有 display: flex; ，我想在所有第一个项目之间的最大宽度上对齐每个第二个弹性项目。

为了更清楚，您将在下面找到一张图片来展示我正在努力实现的目标：

我可以使用哪些现有的 CSS 属性来实现这一目标？

编辑：按照下面的要求，您将从我当前的angular应用程序中找到代码：

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

<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

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

看看我的 fiddle。我认为解决方案是有 2 个列表。您应该在 lists-wrapper 上使用 flex，在每个 li 上使用 flex。

<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;
}

Answer 2

不使用 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 3

您可以将 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>

CSS Flex - LI 在第一个项目最大宽度上对齐每个第二个弹性项目

CSS Flex - LI align every second flex item on first item max width

html

css

flexbox

angular5