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

Question

你好，我有2个弹性物品包装在一个容器中。我想包含按钮的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

添加flex: 1;到child1的风格。在柔性房产的更多信息here