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-basis属性（在这种情况下类似于width）。

使用flex-grow，您将更难以对齐两行中的列。 flex-grow更关注自由空间的分布，而不是精确调整弹性项目的大小。（More details。）

＆＃13;

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

＆＃13;

jsFiddle

Answer 2

可能不是正确的解决方案，但建议/解决方法!!

建议1：

＆＃13;

<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: 1;visibility: hidden">B</button>
    <button style="flex: 1">B</button>
    <button style="flex: 1">C</button>
    <button style="flex: 1">D</button>
  </div>
</div>

＆＃13;

建议2：

＆＃13;

<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: 1; margin-left: 25%">B</button> <!-- 25% = 100/(No. of buttons in previous row) -->
    <button style="flex: 1">C</button>
    <button style="flex: 1">D</button>
  </div>
</div>

＆＃13;

Answer 3

好吧，我担心这会被否决，但是我读/反对使用表格进行布局的参数。在阅读完这些参数后，我来到了这里……其中之一是“更少的代码”，但是在这种情况下，看起来可能更多的代码也变得更复杂。

我还努力使多行之间的列对齐。

我阅读了接受的答案，查看了其他答复，然后返回，删除了我的div并使用了一张桌子。

在某些情况下，表只是简单的旧表即可。

对齐两行flex容器中的列

3 个答案:

jsFiddle