如何使用flexbox在<li>元素中创建列

Question

如何让这个按钮位于同一列中？

ul
  li
    p button
    p button

使用flexbox 如果p的宽度不同，则按钮会移动。

Answer 1

Flexbox没有网格概念。

相反，您可以使用CSS表格

＆＃13;

＆＃13;

ul {
  display: table;
}
li {
  display: table-row;
}
p, button {
  display: table-cell;
}

＆＃13;

<ul>
  <li>
    <p>Short</p>
    <button>Foo</button>
  </li>
  <li>
    <p>Long long long text</p>
    <button>Bar</button>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;