Flex gleicher Höhe Spalten und unteren Ausrichtung

Question

Ich habe eine Liste, in meiner Website werde ich Bilder in der Verpackung haben, alle unterschiedlichen Höhe. Ich möchte, dass jede Flex-Reihe die Höhe des höchsten Bildes darstellt.

<ul> 
    <li><div class="wrapper">hello</div></li> 
    <li class="large"><div class="wrapper">hello</div></li> 
    <li><div class="wrapper">hello</div></li> 
    .... 
</ul> 

ich erreicht habe dies bereits mit:

ul{ 
    display: flex; 
    flex-flow: row wrap; 
} 

Mein Problem ist, dass ich Artikel auf der Unterseite jeder Flex Reihe ausrichten möchten, kann ich dies über tun:

align-items: baseline 

Das Problem hier ist, dass alle Li's nicht die gleiche Höhe haben.

Wie kann ich alle li auf der gleichen Höhe halten (ohne die Höhe anzugeben, da sie dynamisch ist) und den Inhalt auf die Basis ausrichten, indem Sie flex verwenden. Ich bin mir bewusst, dass Sie das wahrscheinlich mit der Tabellenzelle oder der absoluten Positionierung durchführen können.

JSFiddle

ul{ 
 
    list-style-type:none; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 
li{ 
 
    background: gold; 
 
    border: 1px solid grey; 
 
    flex-basis: 20%; 
 
} 
 

 
.wrapper{ 
 
    background: blue; 
 
    //what here? 
 
} 
 

 
.large{ 
 
    height: 250px; 
 
}

<ul> 
 
<li><div class="wrapper">hello</div></li> 
 
<li class="large"><div class="wrapper">hello</div></li> 
 
<li><div class="wrapper">hello</div></li> 
 
<li><div class="wrapper">hello</div></li> 
 
</ul>

Answer 1

jedes li Make a (verschachtelte) Flex-Container.

Richten Sie dann jedes div (jetzt ein flexibles Element) an der Unterseite des ul aus.

ul { 
 
    list-style-type:none; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
li { 
 
    background: gold; 
 
    border: 1px solid grey; 
 
    flex-basis: 20%; 
 
    display: flex;    /* NEW */ 
 
    align-items: flex-end;  /* NEW */ 
 
} 
 

 
.wrapper { 
 
    background: blue; 
 
    width: 100%;    /* NEW */ 
 
} 
 

 
.large{ 
 
    height: 250px; 
 
}

<ul> 
 
    <li> 
 
    <div class="wrapper">hello</div> 
 
    </li> 
 
    <li class="large"> 
 
    <div class="wrapper">hello</div> 
 
    </li> 
 
    <li> 
 
    <div class="wrapper">hello</div> 
 
    </li> 
 
    <li> 
 
    <div class="wrapper">hello</div> 
 
    </li> 
 
</ul>

Revised Fiddle