3列横並びのレスポンシブボックスのCSSとコード

騙す人間にはなりたくないホームページ制作

サイト制作をする際に、CSSで悩むことがあります。

「デザイン的にこうしたいけど、どうしたらよいのか?」

そのような時、さまざまなサイトを参考にさせてもらうのですが、最近参考にさせてもらったサイトを紹介します。

CSSのFlexboxとは?横並びレイアウトの新定番になるかも!

横並びの3列の以下のようなデザインが欲しかったのですが、まさにそのままを紹介してくれていました。

良い感じです。

ここで文字数を少し長くしてみました。すると。

OKです。問題ないですね。

さらに文字数が少ないのと長いのを一緒に利用してみました。

問題ないですね。

心配だったのは、文字数の少ない「テスト1」の縦幅が短くなってしまい高さがバラバラになってしまうことでした。しかし問題なく、すべてのボックスの高さが揃ってくれました。

非常に便利だと思いますので、利用してみてはいかがでしょうか。

タイトルとURLをコピーしました