高さをそろえる～Flex 編～
2025年2月20日
2月の終わりがあと残り数日…
もう、公立高校の3年生は自由登校期間に入ってるでしょうね。
寒さが続いている中、インフルエンザがまん延が徐々に減ってきていますが、体調には気を付けてください。
さてと、話題を取り戻して…
高さをそろえる～Flex 編～
過去のブログに紹介した「高さをそろえたい！～忘備録～」の記事の中に、Floatを使ったCSSとjavascriptを合わせて高さをそろえる方法を説明しました。
しかし、近年ではこのスタイルは全く通用しない時代になってきてます。
なぜなら、レスポンシブで、スマホ閲覧した場合、高さが妙に長くなって見づらいケースが出てきました。
それを解消するために、「display:flex」を使って高さを均等にそろえる技法がありました。
子要素、孫要素まで、きれいに高さをそろえる方法を教えますね。
<ul>
<li>
<figure>
<img src="img/photo01.jpg" alt="Photo" width="100%" />
<figcaption>写真の説明</figcaption>
</figure>
<p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</p>
</li>
<li>
<figure>
<img src="img/photo02.jpg" alt="Photo" width="100%" />
<figcaption>写真の説明</figcaption>
</figure>
<p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</p>
</li>
<li>
<figure>
<img src="img/photo03.jpg" alt="Photo" width="100%" />
<figcaption>写真の説明</figcaption>
</figure>
<p>Sample Text Sample Text Sample Text Sample Text Sample Text</p>
</li>
</ul>ul {
display: flex;
margin: 0 auto;
padding: 0;
width: 1200px;
}
ul li {
margin: 0 auto 30px;
padding: 20px;
width: calc(100% / 3 - 30px);
}ここまでは、普通の「display:flex」の通常の書き方です。
では、孫要素の高さをそろえたいときはどうするか？
まずは、自分で試行錯誤して完成してみてくださいね。
ではまた！
- Leonardo
- プロという自覚を持てよ！ 2025年4月10日
- リセットスタイル完成！ 2025年4月9日
- 今日から新学期？ 2025年4月8日
- 外注先のWeb技術を見てキレた！ 2025年4月7日
- 今日は近くの桜花見！ 2025年4月6日