Verwenden von CSS Flex, um Elemente in der gleichen Höhe in einer Reihe

Question

Ich versuche, die Elemente mit gelbem Hintergrund gleiche Höhe wie andere in dieser Zeile mit flex, aber kann es nicht mit diesem Design. Die li Elemente wollen einfach nicht auf voller Höhe sein.

Führen Sie das Code-Snippet aus, um zu sehen, worüber ich spreche. Vielen Dank!

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#main { 
 
    width: 90%; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    font-size: 0; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 100%; 
 
    flex-direction: column; 
 
} 
 

 
.header { 
 
    background: yellow; 
 
    flex: 1; 
 
    font-size: 13px; 
 
    width: 100%; 
 
} 
 

 
.body { 
 
    font-size: 13px; 
 
    border: 1px solid orange; 
 
    background: lightblue; 
 
    width: 100%; 
 
} 
 

 
.liWrapper { 
 
    display: inline-flex; 
 
    width: 25%; 
 
    min-width: 25%; 
 
    margin: 10px 0 0 0; 
 
    padding: 0; 
 
}

<div id="main"> 
 
    <div class="liWrapper"> 
 
    <div class="wrapper"> 
 
     <div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div> 
 
     <div class="body">picture</div> 
 
    </div> 
 
    </div> 
 

 
    <div class="liWrapper"> 
 
    <div class="wrapper"> 
 
     <div class="header">Title fwef wef wef e</div> 
 
     <div class="body">picture</div> 
 
    </div> 
 
    </div> 
 

 
    <div class="liWrapper"> 
 
    <div class="wrapper"> 
 
     <div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div> 
 
     <div class="body">picture</div> 
 
    </div> 
 
    </div> 
 

 
    <div class="liWrapper"> 
 
    <div class="wrapper"> 
 
     <div class="header">Title fwef wef wefwf ewf w</div> 
 
     <div class="body">picture</div> 
 
    </div> 
 
    </div> 
 

 
    <div class="liWrapper"> 
 
    <div class="wrapper"> 
 
     <div class="header">Title fwef wef wef ef ewfff wefe wfew f wef fewf wef few few fwef ewf ewf w</div> 
 
     <div class="body">picture</div> 
 
    </div> 
 
    </div> 
 

 
    <div class="liWrapper"> 
 
    <div class="wrapper"> 
 
     <div class="header">Title fwef wef</div> 
 
     <div class="body">Body</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Sie benötigen ein

display: flex; 
flex-wrap: wrap; 

zu #main (dies kann auch eine implizite flex-direction: row; enthält) hinzuzufügen. Sie erwarten, dass jeder der .wrapper die gleiche Höhe hat, aber Sie haben kein Styling, das ihnen sagt, das zu tun. Die display: flex; und flex-direction: column; auf der .wrapper teilt einfach den Wrapper seine Höhe unter seinen untergeordneten Elementen zu teilen. Wenn es nicht schon die richtige Höhe ist, wird mehr nicht magisch erscheinen.

Die Flex-Zeile und der Zeilenumbruch machen standardmäßig alle untergeordneten Elemente gleich groß, was vermutlich das gewünschte Verhalten ist. :)

 html, body { 
 
      height: 100%; 
 
      margin: 0; padding: 0; 
 
     } 
 

 

 
     #main{ 
 
      width: 90%; 
 
      padding: 0; 
 
      margin: 0 auto; 
 
      font-size: 0; 
 
      display: flex; 
 
      flex-wrap: wrap; 
 
     } 
 

 
     .wrapper { 
 
      display: flex; 
 
      width: 100%; 
 
      height: 100%; 
 
      flex-direction: column; 
 
     } 
 

 
     .header { 
 
      background: yellow; 
 
      flex: 1; 
 
      font-size: 13px; 
 
      width: 100%; 
 
     } 
 

 
     .body { 
 
      font-size: 13px; 
 
      border: 1px solid orange; 
 
      background: lightblue; 
 
      width: 100%; 
 
     } 
 

 
     .liWrapper{ 
 
      display: inline-flex; 
 
      width: 25%; 
 
      min-width: 25%; 
 
      margin: 10px 0 0 0; 
 
      padding: 0; 
 

 
     }

<div id="main"> 
 
    <div class="liWrapper"> 
 
     <div class="wrapper"> 
 
      <div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div> 
 
      <div class="body">picture</div> 
 
     </div> 
 
    </div> 
 

 
    <div class="liWrapper"> 
 
     <div class="wrapper"> 
 
      <div class="header">Title fwef wef wef e</div> 
 
      <div class="body">picture</div> 
 
     </div> 
 
    </div> 
 
    <div class="liWrapper"> 
 
     <div class="wrapper"> 
 
      <div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div> 
 
      <div class="body">picture</div> 
 
     </div> 
 
    </div> 
 

 
    <div class="liWrapper"> 
 
     <div class="wrapper"> 
 
      <div class="header">Title fwef wef wefwf ewf w</div> 
 
      <div class="body">picture</div> 
 
     </div> 
 
    </div> 
 
    <div class="liWrapper"> 
 
     <div class="wrapper"> 
 
      <div class="header">Title fwef wef wef ef ewfff wefe wfew f wef fewf wef few few fwef ewf ewf w</div> 
 
      <div class="body">picture</div> 
 
     </div> 
 
    </div> 
 

 
    <div class="liWrapper"> 
 
     <div class="wrapper"> 
 
      <div class="header">Title fwef wef</div> 
 
      <div class="body">Body</div> 
 
     </div> 
 
    </div> 
 
</div>