Flexbox dikey olarak yığılmış kutularda eşit yükseklikte kalıyor

Question

Büyük kutuların görünümü olan bir sürü bağım var ve içerik ve yükseklik genellikle değişiyor. Her satırda eşit yükseklik vermek için flexbox kullanımı kolaydır. Bootstrap ızgara düzenini kullanıyorum ve her kutu daha küçük bir ekran boyutunda dikey olarak (her satırda bir tane) istiflendiğinde, aynı yüksekliğe ayarlamak için esnek kutu alamıyorum. flow-direction'u column'a row'dan değiştirerek sorunu çözebileceğimi umuyordum, ancak hayır.

Bunu javascript hack kullanmadan çözmenin bir yolu var mı?

İlgili üst kapsayıcı css:

display: flex; 
flex-direction: row; 
flex-flow: row wrap; 

Çocuk bağlantı (esnek) kutuları:

display: flex; 

Sözde kod:

<div class="flex-container> 
    <a href="/#" class="box col-lg-3 col-md-4 col-sm-6"> 
    <h2>Test2</h2> 
    <div><img src="/ds" alt="Hi" /></div> 
    <div>sadsafmf sløfmkls</div> 
    </a> 
    <a href="/#" class="box col-lg-3 col-md-4 col-sm-6"> 
    <h2>Test3</h2> 
    <div><img src="/ds" alt="Hi" /></div> 
    <div>sadsafmf sløfmkls skldfsd ffsf sdflsdf f sl as ad sad</div> 
    </a> 
</div> 

Answer 1

Basitçe kutu elemana align-self:stretch ekleyin. Ayrıca çocuk üzerinde height: 100% çalışabilir.

Answer 2

Hayır ... eşit yükseklik sadece aynı satırda çalışır ... böylece öğeler sarıldığında eşit yüksekliklere sahip olmazlar. Eğer esnek yönlendirme sütunu ise, her iki elemanın da aynı yükseklikte olması için yeterli dikey alanın mevcut olması koşuluyla (2 * en büyük) çalışabilir. Aksi halde, konteyner aynı boyda iki diva uyum sağlamak için gerilmeyecektir.

.container { 
 
    margin-bottom:10px; 
 
    } 
 

 
.col-sm-6 { 
 
    border:1px solid grey; 
 
    flex:1; 
 
} 
 
.fixed { 
 
    height: 250px; 
 
} 
 
.flex-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row fixed flex-container"> 
 
     <a href="/#" class="box col-lg-3 col-md-4 col-sm-6"> 
 
     <h2>Same Height</h2> 
 
     <div>sadsafmf sløfmkls</div> 
 
    </a> 
 
     <a href="/#" class="box col-lg-3 col-md-4 col-sm-6"> 
 
     <h2>Same Height</h2> 
 
     <div>sadsafmf sløfmkls skldfsd ffsf sdflsdf f sl as ad sad</div> 
 
    </a> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="row flex-container"> 
 
     <a href="/#" class="box col-lg-3 col-md-4 col-sm-6"> 
 
     <h2>Shorter</h2> 
 
     <div>sadsafmf sløfmkls</div> 
 
    </a> 
 
     <a href="/#" class="box col-lg-3 col-md-4 col-sm-6"> 
 
     <h2>Taller</h2> 
 
     <div>sadsafmf sløfmkls skldfsd ffsf sdflsdf f sl as ad sad</div> 
 
    </a> 
 
    </div> 
 
</div>