もうfloatには戻れない!flexboxの使い方!【便利すぎ】

flexbox HTML/CSS

こんにちは、なっちる先生(@nacchi_jagariko)です。

現在、フリーランスエンジニアとして活動しています。

みなさん、floatを使っていて、こんな経験ありませんか?

floatっていちいち浮かんでめんどくさい

float使ったら、いちいちclearfixするのめんどくさい〜

そんなときには、、、

flexbox!!!

ということで、今回は、とても便利なflexboxの使い方を説明していきます〜。

この記事は以下のような人向きです。

flexboxってどうやって使うの?

では、参りましょう〜。

スポンサーリンク

 flexboxとは

flexbox は CSS3 で定義された仕組みで、比較的新しく登場したものになります。
IE11を含めて、すべてのブラウザがサポートしています。(下記画像参照)
そのため、どんな案件でも、互換性を気にせずに普通に使って大丈夫なものになります。
flexboxは、
「display: flex;」の1行だけで横並びにできる!!
というものすごい強みを持ちます。

今までは、要素を横並びにするとなると、

  • floatを使う
  • table-cellを使う
  • inlineやinline-blockを使う

という手段がありました。

しかし、横並びしたものを「中央揃えにする」「高さを揃える」となると、どれもスタイル指定が面倒なんですよね〜。

flexboxだと、横並びに関してのゴタゴタを簡潔にできるようになります。

一度使ったらもうもどれないよぉ〜

 横並びにするコード

では、早速flexboxの使い方を解説していきます。

※Web制作においてこれさえおさえておけばよいと判断したものしか、解説しませんのでご了承ください。

flexboxを使って要素を横並びするには、先述した通り、たった1行の記述をするだけです。

親要素に以下のコードを記述するだけです。

使用例は以下です。

See the Pen BEYZbB by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

めちゃくちゃ簡単ですね!

また、横並びした要素の高さも自動で揃えてくれるので、わざわざmatchheight.jsなどを使わなくても良くなります。

以下の例がわかりやすいです。

See the Pen oOEejQ by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

特に指定していなくても、高さが揃ってますね。

 空白指定のコード

要素を横並びにした後は、要素同士の空白の指定をしたいもの!

flexboxだと、これまた簡単に指定ができます。

等幅

空白を等幅したいときには、以下のコードを親要素に追加します。

See the Pen MRQvvO by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

等幅(前と後ろにも空白)

等幅だけど、前と後ろの要素にも空白を入れたい場合は以下のコードを追加します。

See the Pen gyvxeP by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

中央寄せ

中央寄せにする場合は、以下のコードを追加します。

See the Pen JVpyaV by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

 折り返し設定のコード

横並びした要素を折り返したいときもあると思います。

そんなときは以下のコードを親要素に追加します。

See the Pen wZyqLe by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

きれいに折り返しできていますね!

実際、Web制作において、上で挙げた「空白の調整・折り返し」の2つぐらいしか使いませんが、要素の縦方向の揃え等、flexboxでできることはもっとあります。

以下で詳しく説明されていますのでもっと知りたい方は参考にしてみてください。

日本語対応!CSS Flexboxのチートシートを作ったので配布します

 おまけ:floatの回り込みの解除

flexboxは便利だけれども、やはりfloatで作られたWebサイトもまだまだあります。

floatを使ったサイトを改修するときの参考になればと、floatの回り込みの解除について、簡単に説明します。

と言っても、そこまで言うことは無くて、floatしたものの次の要素に以下のコードを加えるだけです。

See the Pen bJLorv by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

実際のところ、これで諸々解決しますので、特にfloatにおびえることはないです。

 まとめ

以上、flexboxの使い方(よく使うもの)とおまけでfloatについても少し説明しました〜。

いかがだったでしょうか??

flexboxめちゃくちゃ便利ですね!

flexboxとfloat等その他の手法は、案件に合わせて使い分けてみてください〜。

以上でなっちる先生の授業を終わります〜。

素敵なプログラミングライフを!

スポンサーリンク
HTML/CSS
スポンサーリンク
なっちる先生をフォローする
なっちる先生
タイトルとURLをコピーしました