像桌子一樣均勻地在li內散布物品

Question

我想在li內均勻散布物品，該怎么辦？ 我嘗試過flexbox，但不確定如何使它工作。

 #overzicht { max-height: 500px; overflow-y: auto; display: flex; } span { display: inline-flex; justify-content: space-between; } 

 <ul id="overzicht" class="list-group"> <li class="list-group-item"> <span>Name</span> <span>Address</span> <span>Status</span> </li> </ul> 

Answer 1

您應該在要作為表格傳播的元素的直接父元素上添加“ display：flex”。

#overzight > li {
  display: flex;
  justify-content: space-between;
}

span {
  flex-grow: 1;
  flex-shrink: 0;
}

可以在這里找到有關flexbox的出色教程和備忘單： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/