如何将容器中的弹性物品移到底部？

Abhilash Reddy 发表于 Dev

阿比拉什·雷迪

您好，我有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的底部。有人可以帮助我

高拉夫·阿格加瓦尔

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

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