質問: ### 実現したい事 リストをdisplay:flexやfloatで横並びにすると、 liの高さが隣の要素の高さに依存して 下記の2つの画像のように余白が生まれてしまうと思いますが、この余白を無くしたいです。 (画像ではliに色をつけています) ![flexbox](https://teratail.storage.googleapis.com/uploads/contributed_images/96cc862926aca0c8a757ab4554e6fe7e.png) ![float](https://teratail.storage.googleapis.com/uploads/contributed_images/fa4de773a084eb35659327cacef7aa8c.png) これを、下記の画像のようにliの要素の高さのみで余白なく並べたいです。 ![flexcolumn](https://teratail.storage.googleapis.com/uploads/contributed_images/a3a3cb753ae119f25d6c26b075a8d606.png) ### やっている事 最後の画像には下記のCSSを充てています。 flex-direction: column;で縦並びにし、高さを設定して折り返す事で2列にしていますが 多言語対応サイトなので言語毎に文字数が変わってしまう為、できればheightを設定したくありません。 ``` ul{ display: flex; flex-wrap: wrap; flex-direction: column; height: 500px; } ``` 調べてもなかなか理想のものが見つかりませんでしたので、 もし他の方法があればと思い、質問させていただきました。 何卒宜しくお願い致します。
回答: `flex` や `float` では実現不可能だと思いますが、column にしてしまえば似た形にはなります。 【column-count - CSS: カスケーディングスタイルシート | MDN】 【マルチカラムレイアウトとは?columnプロパティについて】 【CSS3:簡単に段組を作れる「columns」プロパティ | ハックノート】