CODEWITHSUNDEEP
htmlcssflexboxangular5
Logan Wlv
Logan Wlv

Reputation: 3744

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

On my application I have a something like that : 

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

Each <li> has display: flex; , and I would like to align every second flex item on the max-width between all first items.

To make it more clear, bellow you will find a pic to show what I am trying to achieve :

enter image description here

What are the existing CSS properties that I could play with to achieve that ?

EDIT: As requested bellow you'll find the code from my current angular application :

.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 with 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>

Upvotes: 1

Views: 807

Answers (3)

Paulie_D
Paulie_D

Reputation: 115287

Not with flexbox but CSS Tables can do that although an extra span is required.

* {
  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>

Upvotes: 2

3rdthemagical
3rdthemagical

Reputation: 5350

You can use table itself or some divs with 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>

Upvotes: -1

Łukasz Blaszyński
Łukasz Blaszyński

Reputation: 1565

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

See my fiddle. The solution is to have 2 lists i think. You shoudl use flex on lists-wrapeer and the flex on each 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>

and styling:

li {
  display: flex;
}

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

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

.lists-wrapper {
  display: flex;
}

Upvotes: 2

Related Questions