【Flexbox】CSSでボックスの高さを揃える方法!レスポンシブデザイン【floatは古い】

\ 知らないうちに損してる? /

Amazonポイント最大2.5%還元キャンペーン

駿河屋スタッフ募集中

WEBデザインでよく使われるボックスレイアウトですが、横に並べたときにボックスの高さ(下辺)が揃わずに苦労したことってあると思います。

実は「Flexbox」というCSSプロパティを使えば、めちゃくちゃ簡単に解消できちゃうんです。

現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう!

float:leftして、解除して、なんてことはもうしなくていいんです。

 

Flexboxの使い方

親要素にFlexboxを指定

ボックスレイアウト全体を囲んでいる親要素にdisplay: flexboxを指定するだけです。

ただそれだけ。すごい。

  • HTML

<div class=”wrap”> <!– 親要素 –>
<div class=”box”> <!– ボックス1 –>
ボックス1の内容
</div>
<div class=”box”> <!– ボックス2 –>
ボックス2の内容
</div>
<div class=”box”> <!– ボックス3 –>
ボックス3の内容
</div>
</div>

  • CSS

.wrap{
display:flex;
}
.box{
width: 31%;
margin: 1%;
}

 

参考サイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

幼少期、絵描きになりたくて毎日絵を描く。地元の写生大会で金賞受賞。
高校生の頃からバンドを組み、作詞・作曲・編曲・映像を担当。ライブで知り合ったバンドマンとは今でも仲良し。

25歳から独学でデザイン・ウェブ制作を0から学習し、ウェブデザイナーとして中途入社。自分だけの武器を探し、デザイン、マークアップ、企画、マーケティング、SNS、広告など片っ端から勉強。
今はその知識を活かしてPdMを担当。

その傍ら数々の副業(イラスト制作、アフィリエイト、古着転売、ハンドメイド、作曲)をして、現在30代に突入。

東海在住。
運営ブログ「シュマリ」は月間3万PV。
読んだ漫画は4万冊。