html - 如何将容器中的 flex 元素移动到底部？

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>