コンテナ内のフレックスアイテムを下に移動するにはどうすればよいですか？

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の」を持っているとのID「child2の」とdiv要素を配置する必要があり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;を追加してください。フレックスプロパティの詳細情報here