他の要素を含む要素を同じ高さに設定する

Question

Flexboxを使用してレイアウトを作成しようとしています.3つの内部要素からなる要素があります。親item要素は、3 divs：image,button,textを含む。問題は、自分のアイテムに常に他のアイテムと同じ高さの画像やテキストが含まれるとは限りません。ボタンは一貫した高さを持つものです。私はimage divsのそれぞれが最高のものと同じ高さでtext divsについて同じものを持つことが可能かどうかを調べようとしています。私は1つの要素が同じ高さには、このような画像の上に移動します要素を作るために短い画像、ホワイトスペースを持っているので、もし垂直、下に整列させるためにも、画像たい：

そして、ここで私がこれまで持っているものです。

.container { 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    flex-flow:row wrap; 
 
    justify-content:center; 
 
} 
 

 
.item { 
 
    max-width:200px; 
 
    margin:0 20px; 
 
}

<div class="container"> 
 
    <div class="item"> 
 
    <div class="image"> 
 
     <img src="http://placehold.it/150x300" /> 
 
    </div> 
 
     <div class="button"> 
 
     <button>Click Me</button> 
 
     </div> 
 
     <div class="text"> 
 
     <p>consectetur adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="image"> 
 
     <img src="http://placehold.it/150x200" /> 
 
    </div> 
 
     <div class="button"> 
 
     <button>Click Me</button> 
 
     </div> 
 
     <div class="text"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="image"> 
 
     <img src="http://placehold.it/150x250" /> 
 
    </div> 
 
     <div class="button"> 
 
     <button>Click Me</button> 
 
     </div> 
 
     <div class="text"> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="image"> 
 
     <img src="http://placehold.it/150x270" /> 
 
    </div> 
 
     <div class="button"> 
 
     <button>Click Me</button> 
 
     </div> 
 
     <div class="text"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
</div>

私は、私が最も高いと変更を取得するために各アイテムをループし、この使用してJavascriptを行うことができることを知っています他のすべてのCSSは可能ですが、私はCSSだけを使用したいと思います。画像コンテナの高さを最も高い画像の高さに設定することもできることも知っていますが、これらの画像は動的になり、多くの画像が存在するため、ハードコード値を必要としません。

Answer 1

クラスをフレックスしてjustify-content: flex-end;を追加すると、大部分の効果が得られますが、私が知っている限り、2つの要素を整列させたい場合は、少なくとも1つのアイテムに特定の高さを設定する必要があります。フレックスボックス全体で同じです。しかし、間違っていることが証明されてうれしい。

代わりに、最初の子にmargin-top: autoを使用して、使用されていないスペースを上にプッシュすることができます。

.container { 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    flex-flow:row wrap; 
 
    justify-content:center; 
 
} 
 

 
.item { 
 
    max-width:200px; 
 
    margin:0 20px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-end; 
 
} 
 

 
.text { 
 
    height: 36px; /* magic number */ 
 
}

<div class="container"> 
 
    <div class="item"> 
 
    <div class="image"> 
 
     <img src="http://placehold.it/150x300" /> 
 
    </div> 
 
     <div class="button"> 
 
     <button>Click Me</button> 
 
     </div> 
 
     <div class="text"> 
 
     <p>consectetur adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="image"> 
 
     <img src="http://placehold.it/150x200" /> 
 
    </div> 
 
     <div class="button"> 
 
     <button>Click Me</button> 
 
     </div> 
 
     <div class="text"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="image"> 
 
     <img src="http://placehold.it/150x250" /> 
 
    </div> 
 
     <div class="button"> 
 
     <button>Click Me</button> 
 
     </div> 
 
     <div class="text"> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="image"> 
 
     <img src="http://placehold.it/150x270" /> 
 
    </div> 
 
     <div class="button"> 
 
     <button>Click Me</button> 
 
     </div> 
 
     <div class="text"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
</div>