CSS Flexbox的 - 使含有其他元素同一高度

Question

我試圖創建一個使用Flexbox，就在那裏我有一個由3個其它內部元件的元件佈局元素。父item元素包含3 divs：image，button，text。問題是我的物品不會總是包含與其他物品高度相同的圖像或文字。按鈕是一個高度一致的東西。我試圖找出是否有可能有我的每一個image的div是相同的高度最高的之一，同爲text的div。我也想對圖像進行垂直對齊的底部，因此，如果一個元素有一個較短的形象，白色的空間，使元素相同的高度會去上面的圖片是這樣的：

這裏是我到目前爲止有：

.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

彎曲.item類和添加justify-content: flex-end;將提供大部分的影響，但據我所知，如果要將兩個元素對齊，必須在至少一個項目上設置特定高度在Flexbox中相同。很高興被證明是錯誤的。

你可以選擇使用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>