html - 对齐两行 flex 容器中的列

Question

我有两行:一行有 4 个按钮，一行有 3 个按钮。

我希望第二行的第一列与 flexbox 中第一行的第二列匹配。

这是我的代码，感谢任何帮助。

<div> 
  <div style="display: flex"> 
    <button style="flex: 1"> A </button> 
    <button style="flex: 1"> B </button>
    <button style="flex: 1"> C </button> 
    <button style="flex: 1"> D </button> 
  </div> 
  <div style="display: flex"> 
    <button style="flex: 2"> B </button>
    <button style="flex: 1"> C </button> 
    <button style="flex: 1"> D </button> 
  </div> 
</div>

Answer 1

尝试在第二行使用一个不可见的 flex 元素。

要更准确地调整大小，请使用 flex-basis 属性(在本例中类似于 width)。

使用 flex-grow，您将很难对齐两行中的列。 flex-grow 更关心自由空间的分布，而不是 flex 元素的精确大小。 ( More details .)

<div>
  <div style="display: flex">
    <button style="flex: 1 1 25%">A</button>
    <button style="flex: 1 1 25%">B</button>
    <button style="flex: 1 1 25%">C</button>
    <button style="flex: 1 1 25%">D</button>
  </div>
  <div style="display: flex">
    <button style="flex: 1 1 25%; visibility: hidden;">A</button>
    <button style="flex: 1 1 50%">B</button>
    <button style="flex: 1 1 12.5%">C</button>
    <button style="flex: 1 1 12.5%">D</button>
  </div>
</div>

jsFiddle