同じ高さのインラインブロック要素を数行で入力する

Question

JSとmin-height（特別な場合）なしで同じ高さのすべてのブロックを実行できますか？ブロックは複数の行に配置できます。

例jsfiddle

ul { 
 
    font-size: 0; 
 
    max-width: 300px; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    width: 30%; 
 
    margin: 1%; 
 
    background: grey; 
 
    font-size: 12px; 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
</ul>

Answer 1

flexboxがオプションである場合は、flexboxを包むulを作ることができます。

これはどのように機能しますか？

1. display: flexさまざまな方法でその子の間に空白を配布する性質を持っているフレキシボックスを作成します。

2. flex-wrap: wrapはli sがコンテンツ

3. justify-content: center水平センタリングを行うに応じて、次の行に移動することができます。

4. 垂直li sがデフォルトであるalign-items: stretchと呼ばれる性質を持っている - これはli Sの高さがラインに等しくなることを可能にします。

デモは、以下を参照してください：display: flexを使用して簡単に

ul { 
 
    font-size: 0; 
 
    max-width: 300px; 
 
    text-align: center; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    justify-content:center; 
 
} 
 

 
li { 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    width: 30%; 
 
    margin: 1%; 
 
    background: grey; 
 
    font-size: 12px; 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
</ul>

Answer 2

、。

ul { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    font-size: 0; 
 
    max-width: 300px; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    width: 30%; 
 
    margin: 1%; 
 
    background: grey; 
 
    font-size: 12px; 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
</ul>

： 配向+ラッピング flex-flow: row wrap;および justify-content: center;

例における中央の位置合わせを指定し