質問: display:flex;を使用してli要素を横並びにし、 高さを揃えたかった。 しかし、内容が可変であるため、以下のようになってしまう。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/21310f6c66628d1c329c405a427157ed.png) コード --- HTML ``` バナナ バナナ バナナ テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ``` CSS ``` ul { display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style-type: none; } li { width: 32%; padding: 10px; margin-right: 2px; margin-bottom: 2px; border: 1px solid #444; box-sizing: border-box; } ``` 試したこと ----- flex自体を色々調べたが、どのサイトにも displayにflexを指定すれば高さが揃うとしか書いていなかった。 ちなみにflex-wrap: wrap;を指定すると 1段目は1段目の中で最大の高さにコンテンツを合わせる、 2段目は2段目の中で最大の高さに合わせる ような動きになっている?ため1段目も2段目も同じに高さにすることができない。。 決めうちでheight(min-,max-含む)を指定すれば高さは揃うが もちろんテキストは飛び出る(overflow:hidden,scrollでは対応しない)のでよくない。 javascriptでごにょごにょやればいけそうではあるけどできればcssで解決したい。 cssでこれを再現できる方法があったら教えてください。
回答: **flexbox では不可能**です。 行ベースの flex コンテナに複数の行がある場合、それぞれの行の高さはその行にフレックスアイテムを含めるために必要な最小の高さになります。代替として、 CSS Grid Layout を用いることで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。 ``` バナナ バナナ バナナ テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ``` ``` ul { display: grid; margin: 0; padding: 0; list-style-type: none; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; } li { box-sizing: border-box; margin-right: 2px; margin-bottom: 2px; padding: 10px; border: 1px solid #444; } ```