2月の終わりがあと残り数日…

もう、公立高校の3年生は自由登校期間に入ってるでしょうね。

寒さが続いている中、インフルエンザがまん延が徐々に減ってきていますが、体調には気を付けてください。

さてと、話題を取り戻して…

高さをそろえる～Flex 編～

過去のブログに紹介した「高さをそろえたい！～忘備録～」の記事の中に、Floatを使ったCSSとjavascriptを合わせて高さをそろえる方法を説明しました。

しかし、近年ではこのスタイルは全く通用しない時代になってきてます。

なぜなら、レスポンシブで、スマホ閲覧した場合、高さが妙に長くなって見づらいケースが出てきました。

それを解消するために、「display:flex」を使って高さを均等にそろえる技法がありました。

子要素、孫要素まで、きれいに高さをそろえる方法を教えますね。

～ここまでコピペ～

さてと、子要素の高さをそろえる方法の回答をここで書きます。

ul {
	display: flex;
	margin: 0 auto;
	padding: 0;
	width: 1200px;
}

ul li {
	display: flex;/* ここに子要素に追加 */
	flex-direction: column;/* ここに子要素に追加 */
	margin: 0 auto 30px;
	padding: 20px;
	width: calc(100% / 3 - 30px);
}

これで、2ヶ所のCSSを追加するだけです。

ではまた！