- Coding Methodology
- 第89回 Flexboxの特長を理解して、新しいレイアウトコーディングを身につけよう
第89回 Flexboxの特長を理解して、新しいレイアウトコーディングを身につけよう
CSS3から新しく制定された「Flexbox」というプロパティがあるのですが、これを使うと今までのレイアウトモードの弱点をカバーした柔軟なレイアウト実装ができるようになります。今回は、Flexboxの特長とコーディング方法をご紹介します。
Flexboxの特長
Flexboxの特長としては、①要素同士を思い通りに横並びにしたり、縦並びに順番通りにできる ②並べた要素の高さや幅を自動的に調整してくれる等があり、今までの４つのレイアウトモードより高機能で自由にレイアウト調整ができるようになりました。基本的には、今までfloatなどを使っていた場合と同様に親要素と子要素の関係があります。並べたい要素の親要素にdisplay:flex;を設定します。また、 flex-flowプロパティやflexプロパティを追加して「どのように並べるか」という並べ方やサイズの指定ができます。それでは、Flexboxの実装パターンを２例、紹介します。
例１:カード型のモジュールの横並びレイアウトと高さ揃え
【図1：カード型のモジュールの横並びレイアウト】
サイトによくある図１のようなカード型のモジュールの実装をする場合、これまではfloatを使ってカードを横並びにしていましたが、高さ揃えをする場合はjquery.matchHeight.js等の高さ揃えJSを追加しなければいけませんでした。
これをflexboxで実装してみます。まず、HTMLはコード1-1のように記述します。ポイントはクラス名card-type-01とcolを同じ個所に置くことです。これでcolの高さを揃えればカード自体の高さも揃います。
次にCSSはコード1-2のように記述します。まず、横並びしたい要素の親要素grid-cardsにdisplay:flex;を指定します。これだけで横並びになり、高さも揃いました。floatを使う場合に比べて非常に工数が削減出来ました。
あとは、justify-content:flex-start;を指定して左揃えになるようにしたり、余白や見た目を調整すれば完了です。
【コード1-1：HTML】
【コード1-2：css】
例2: 順番が入れ替わる要素
レスポンシブサイトでPC時とスマホ時で要素の順番を変えたいという実装要望は、今まではかなり難しいことでした。しかし、これもflexboxを使用すると、とても簡単に出来ます。
HTMLはコード2-1のように記述して、要素それぞれに連番クラスorder01～03を付与しておきます。次に、CSSはコード2-2のように記述して、縦並びにするためにflex-direction: column;を追加します。そして、スマホ時のCSSで、クラスorder01～03にそれぞれorder プロパティで指定の順番を与えます。これで指定通りの順番に入れ替わります。
【コード2-1：HTML】
【コード2-2：css】
- 対応ブラウザについて：
- 度々大きな仕様変更があったりと歴史的な紆余曲折があり、最新ブラウザ以外の対応はあまりよくありません。 Can I use ( http://caniuse.com/#feat=flexbox)を確認すると、自動アップデートのあるFirefoxやChromeなどの最新ブラウザとIE11以上、スマートフォンはAndroid4.3とiOS8.4以上で対応しています。
Flexboxを使うメリットは、やはり「レイアウトに対する柔軟さ」です。IEなどを考慮するとまだまだ使い所が限られてしまうかもしれませんが、最近はモダンブラウザが制作の標準になってきており、Web制作を取り巻く環境も徐々に良い方向に変化してきています。ぜひFlexboxの特長を知り、新しいレイアウトコーディングを身につけてみましょう。
