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

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

看我的小提琴。解决方案是我认为有2个列表。您应该在list-wrapeer上使用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 Tables可以做到这一点，尽管需要额外的跨度。

* {
  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将第一个最大宽度的第二个flex项目对齐

3 个答案: