如何將容器中的彈性物品移動到底部？

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