Flexbox。
恥ずかしながら実務で使うまで知らなかった機能です。
「何それ?」状態だったのですが、使ってみるとかなり便利な機能だったので、知らないまたは知っているけど実際使ったことはないという方におすすめしたいと思います!

Flexboxって何?

Flexboxとは、「フレキシブルボックスレイアウトモジュール(Flexible Box Layout Module)」のことです。
前々からあった技術ですが、ブラウザによって書き方が違ったり、仕様がころころ変わったり、これまでは扱いづらいものだったみたいです。
しかし、今現在では主要ブラウザの最新バージョンが対応したので実務でも十分使えるようになってきました。
今までボックス要素の横並びをCSSで行う場合、floatやテーブルレイアウトを使っていましたが、Flexboxを使うとより簡単・早くレイアウト出来ます!
今後使う機会が増えていくと思うので、理解しておくと実務で助かるかも。

Flexboxの何がいいの?

  • CSS一行プラスするだけで横並びに!
  • 上下左右の位置揃えが簡単!
  • 横並びになった要素の高さが自動で揃う!
  • 要素を好きな順序に並び替え出来る!
  • レスポンシブ化も簡単!

Flexboxを使えば、こういうナビゲーションとか……
94ec4b82 4f81 48cb 96d7 d55c709bd7b6

こういうレイアウトとか……
A1a1a1e6 084d 4b37 8bba 4cda02bac2f4

簡単に実装出来ちゃいます。

対応ブラウザ

前述した通り最新のブラウザではほぼほぼ使うことができますが、IEは11以降、Androidは4.4以降でないと使えません。
また、PC、iOSのSafariでベンダープレフィックスが必要です。
旧ブラウザにも対応しなくちゃいけない、など対応ブラウザによってはfloatなどを使った方がいい場合もありますが、覚えておいて損はないはずです。
興味のある方は以下のサイトが参考になると思います。

CSSレイアウトにfloatはもう古い! Webデザイナー初心者でも始められるFlexbox入門 – ICS MEDIA
CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG

Shere
  • はてなブログ
  • Twitter
  • Facebook
Flexboxでレイアウトがラクになる(紹介編)

Writer

  • Name

    星香

  • Position

    フロント兼デザイナーになる予定

  • Profile

    つねに眠い。