HTML5/CSS：Flexboxで他の列の高さに応じてリスト項目を整列させる方法

Flexboxでリスト項目を整列させる

複数のカラムに分けたリストで、各列の高さがバラバラになって見た目が崩れてしまうことはありませんか？CSSのFlexboxを活用すれば、他の列の高さに応じてリスト項目をきれいに整列させることができます。

1. ラッパーをFlexコンテナにする

まず、各カラムを包む親要素（ラッパー）にdisplay: flexを指定します。Flexboxはコンテンツの量に応じて各列を柔軟に伸縮させ、ラッパーは列を横一列にレイアウトしてくれます。

.wrap {
    display: flex; /* これによりラッパーがフレキシブルになる */
}
.wrap .col {
    flex: 1 0 33%; /* 各列を均等に伸縮させる */
}

flexプロパティは、要素を柔軟に伸縮させるための基本となるプロパティです。flex: 1 0 33%と指定することで、各カラムが利用可能なスペースを均等に分け合い、どの画面幅でもバランスの取れたレイアウトを実現できます。

2. リストの内容を下端に揃える

リストの内容をカラムの下端（ボトム）に垂直方向へ揃えたい場合は、次のようにmargin-top: autoを使用します。

.col .content {
    margin-top: auto;
}

Flexアイテムにmargin-top: autoを設定すると、余ったスペースが自動的に要素の上部へ割り当てられ、その結果コンテンツがカラムの下端に揃います。このテクニックを使えば、高さの異なるカラム同士でもリスト項目の下部が美しく整列し、洗練されたレイアウトを作成できます。