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

騙す人間にはなりたくない

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

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

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

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

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

良い感じです。

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

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

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

問題ないですね。

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

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

記事のタイトルとURLをコピーする
  • このエントリーをはてなブックマークに追加

関連記事

ホームページ制作実績

株式会社イーシーセンター

BC留学ステーション静岡

marlmarl

いろどり

いいもの市場

過払い解決

リフォームのリファイン

ページ上部へ戻る