CSS Flexを使用して要素の高さを均等にする

Question

私は、この行の他の要素と同じ高さの黄色の要素をflexを使用して作成しようとしていますが、この設計では理解できません。 li要素は完全な高さにあることはありません。

私が話していることを確認するには、コードスニペットを実行します。 ありがとうございました！

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

あなたは（これも暗黙のflex-direction: row;が含まれています）#mainに

display: flex; 
flex-wrap: wrap; 

を追加する必要があります。 .wrapperのそれぞれが同じ高さになることを期待していますが、そのように指示するスタイリングはありません。 .wrapperのdisplay: flex;とflex-direction: column;は、単に子要素間の高さを分割するようにラッパーに指示します。まだ適切な高さでない場合、より多くの魔法のように表示されません。

flexの行と折り返しは、デフォルトですべての子要素の高さを同じにします。これは、必要とする動作です。 :)

 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>