如何将容器中的弹性项目移动到底部？

Question

您好，我有 2 个包装在容器中的 flex 项目。我希望将包含按钮的 div 放置在父 div 的底部，但在演示中，该 div 放置在兄弟姐妹旁边，这使得底部位置未被使用。

<div style="display:flex;flex-direction:row">
  <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
  <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
    <div  style="display:flex;flex-direction:column;border:1px solid green;width:150px" id="child1">
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
    <div style="display:flex;flex-direction:row" id="child2">
      <button>Add</button>
    </div>
  </div>
</div>

这就是我创建 UI 的方式，我希望 id 为“child1”的 div 占据父级的最大高度，并且应该将 id 为“child2”的 div 放在父级 div 的底部。有人帮助我这样做

Answer 1

如果您只想将框放置在当前高度的底部，这取决于您想要达到的确切位置，仅使用此

<div style="display:flex;flex-direction:row">
  <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
  <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
    <div  style="display:flex;flex-direction:column;border:1px solid green;width:150px;flex-direction:column; margin:0; margin-top:auto" id="child1">
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
    <div style="display:flex;flex-direction:row" id="child2">
      <button>Add</button>
    </div>
  </div>
</div>

另一个例子将高度增加到父 div 的 100%，底部空间将不存在。

<div style="display:flex;flex-direction:row">
  <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
  <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
    <div  style="display:flex;flex-direction:column;border:1px solid green;width:150px;flex:1" id="child1">
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
    <div style="display:flex;flex-direction:row" id="child2">
      <button>Add</button>
    </div>
  </div>
</div>

Answer 2

在 child1 的样式中添加flex: 1;。更多关于 flex 属性的信息here