CSS における clearfix と flexbox の使い分け

ども、@kimihom です。夏休み入りましたな。

今回は自分が CSS を書いてる時に使い分けてる clearfix と flexbox の使い分けについてまとめてみる。ちなみに私は CSS のプロフェッショナルってわけではないので、他にいい方法があるのかもしれない。でも私が CSS を書いている現状ではこれで要素の配置における問題を抱えていないので情報共有までに書いておく。

CSS における clearfix

clearfix はだいぶ前からある 要素の左右の配置テクニックだ。

<div class="clearfix">
  <div class="left">
  </div>
  <div class="left">
  </div>

  <div class="right">
  </div>
</div>
<p>Next</p>

さて、ここで CSS は以下のような形にしたとしよう。

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.left {
  float: left;
  width: 20%;
}
.right {
  float: right;
  width: 20%;
}

結果はだいたい以下のようになる(margin とか padding は省略)。うまく左右の配置ができて、<p> タグがちゃんと clearfix の <div> タグの下に表示することができる。ここで "clearfix" をつけないと、この<p> タグはわけわからないところに出てくる。スタイルシートの float は、文字通り要素を浮かすので、HTML 要素の高さが0になってしまうからだ。

flexbox の使いどき

ほとんどの場合、HTML のレイアウトは clearfix のみで実装できるのだけど、どうしても float だけではうまくスタイリングを実装できない時がある。左側の <div> の横幅を固定し、その右側のコンテンツはウィンドウサイズに合わせて動的に残りの Width で 100%にしたい場合だ。以下の図のケースである。

これを clearfix だけで実現するのは無理だった(方法あれば教えてほしい)。そのまま float をかまして contents の高さが left の高さを超えてしまった場合、その超えた分がleft の下に潜り込んでしまうのである。

clearfix を使った時の潜り込み課題を解決するために、flexbox を利用しよう。

<div class="flex">
  <div class="left">
  </div>

  <div class="contents">
  </div>
</div>
<p>Next</p>

.flex {
  display: flex;
}
.left {
  width: 200px;
}
.contents {
  flex: 1;
}

これでお望みの結果を得ることができる。

終わりに

私の場合はこの clearfix と float の利用が手に馴染んでいるので使っているが、flexbox を使えば clearfix そのものがいらない実装が可能だ。それは結局慣れの問題だと思うので、好みに応じて使い分ければいいと思う。

レイアウトのスタイルの書き方もコーディングするチームで意識を統一しておかないと、ぐっちゃぐちゃな css がいとも簡単にできあがるだろう。しっかりとチームで CSS の運用について共有し、綺麗なスタイルシートの運用をしていきたいところだ。

美しいスタイルシートで、良い夏休みを。

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)