[応用編]2018.01.28前回はシンプルな命令で簡単にフレキシブルなレイアウトを実現できるFlexboxの基本的な使い方を説明しました。今回は応用編としてFlexboxを使って、一般的な使い方とは少し違う面白い使い方をご紹介したいと思います。皆さんがFlexboxを使ったレイアウトと聞いて、真っ先に思い浮かべるのは基本編でも作った横並びメニューやペイン等の分割レイアウトでしょうか?実際にFlexboxはとても使い勝手が良いので、かなり広いシーンで活躍させることができます。01.Flexboxでアイコンを中央配置させてみるまず最初は、Flexboxの強力な中央配置を使って、CSSで作るアイコン的な図形を作ってみたいと思います。当サイトでもページの先頭に戻るために使っている、丸に上向き矢印のボタンや、丸にバッテンの閉じるボタンみたいな図形です。Awesomeを使ったり、SVG等のイメージを使っても良いのですが、私の場合はできるだけ読み込み時間を短縮したいので、ちゃちゃっとCSSで作ってしまいます。従来の「position:absolute」と「margin:auto」を利用したブロック要素の上下左右中央寄せでも作ることができますが、Flexboxでも要素の上下左右中央寄せを簡単に出来てしまう例として載せておきます。HTML"#circle"がベースとなる形です。今回は当サイトでも使っている円形のものにしました。"#close"はバッテンマークです。before擬似要素を使い、プラスの形状にした後に45度回転させたシンプルなものになります。#fff;}"#circle"をコンテナ扱いにするため「display:flex;」プロパティでFlexboxを適用した後に「align-items:center;」「justify-content:center;」でアイテムを上下左右を中央揃えにします。RESULTちなみに「position:absolute」と「margin:auto」を利用したブロック要素の上下左右中央寄せで作る場合は下記のようになります。Flexboxを使った方が若干スッキリしていますね。#fff;}RESULT同じ結果ですね。今度は丸に上向き矢印のトップへ戻るボタンを作ってみましょう。HTMLDIVボックス"#arrow"の上部と右側にborderを付けた形をマイナス45度回転させて図形を作っております。AwesomeやSVGを使うよりもCSSで作った方が簡単です。rotate(-45deg);}RESULTこのようにFlexboxを使うと、中央配置を生かしたアイコンを手軽に作ることができます。他にもFlexboxを使うと複数の要素を並べたり、均等配置も簡単にできるので、例えばハンバーガーメニュー(モバイル等でよく使われる三本線のメニュー)や田の字に四分割したアイコンなど、ブロック要素の上下左右中央寄せでは難しい複雑なアイコンを作ることも可能です。02.Flexboxで手軽にタブを実装してみる今度はちょっと複雑なタブをFlexboxで作ってみたいと思います。Flexbox以前の横並びはfloatを使って回り込ませるか、部品をinlineで並べて行っておりました。タブの場合は、それに加えてタブ部分とコンテンツの表示部分を別パーツで作ってJavaScriptで連動させたり、CSSのラジオボタンのみで作る場合も、複数の要素を跨ぐ複雑なセレクタを用いるなど、面倒な処理が必要でした。基本は「display:flex;」を指定したコンテナ".tabs"の中にタブ部品を並べるだけ。ちなみにタブの部分と、コンテンツの表示部分".tab_box"は同じFlexboxのコンテナの中に入れちゃいました。「flex-wrap:wrap;」で折り返し指定にして、コンテンツの表示部分の横幅を100%にする事で、タブの部分と切り離しております。ease-in-out;}RESULTTab01Tab02Tab03Tab04Tab01の内容が入りますTab02の内容が入りますTab03の内容が入りますTab04の内容が入りますタブとコンテンツの表示部分を同列に置いたことで、ラジオボタンを利用したCSSのみで行うタブの実装がしやすくなりました。03.グリッドデザイン風に項目を並べてみるお次も従来はfloatで行っていたグリッドデザイン風の配置をFlexboxで作ってみます。grid;」というプロパティがあり、こちらは大きさの違うグリッドアイテムをコンテナ内に奇麗に並べることができます。今回は同じ大きさのグリッドアイテムを並べるだけなので、お手軽なFlexboxを使って実装してみたいと思います。1.0em;}RESULTBox01Box02Box03Box04Box05Box06とりあえず単純に並べたものがこちら。wrap;」にしてアイテムが親要素(ここでは未指定ですが100%)を越えると、改行されるように指定します。space-between;」にして、左右のアイテムが端っこにぴったり合うように配置させます。このようにfloatで行うにはちょっと面倒な処理も簡単に実現できます。アイテムの間隔は自動で計算されますので、左右のmarginを気にする必要もありません。Flexboxのおかげで手軽に横並びが実装できますね。ちなみに、メディアクエリーを設定してアイテム要素の横幅を変えれば、デバイスによって表示できる要素の数を変えることが出来ますので、レスポンシブデザインにも持ってこいです。04.サイズの違う要素をFlexboxで自動的に並べる今度は一部アイテムのサイズを「flex-grow」を使って伸ばしてみます。「flex-grow」を指定したアイテムがあるコンテナでは、アイテムを並べてスペースが余っている場合に、余ったスペースが各アイテムに分配されるようになっています。2;}大きくしたいアイテムには「flex-grow」で割合を2にした".wide"クラスを付与してサイズが変わるようにしました。RESULTBox01Box02Box03Box04Box05Box06Box07Box08大きさの違うアイテムが入り混じる事によって、よりグリッドデザイン風に見えます。".wide"指定した部分に注目情報を入れるなどして、サイトの新着情報や制作実績に使えますね。ちなみに「flex-grow」の分配計算を簡単に説明すると、例えば420ピクセルの幅を持つコンテナに3つのアイテムが並んでいるとします。この3つのアイテムはそれぞれ基本の幅が100ピクセルで「flex-grow」が1,2,3の値を持っている場合です。コンテナの幅(420)からアイテムの幅(100×3=300)を引いた120ピクセルが分け合うことのできる余ったペースとなります。この余った100ピクセルを「flex-grow」の値の比率で分配し、個々のアイテムの幅に足したものが、最終的な幅になります。420上例のように折り返しがある場合は、行(Row)ごとにこの計算がなされます。3行目の".wide"指定が他の物とサイズが異なるのはこのような理由からです。「flex-grow」に指定した値が単純に基準値の倍になるわけではありません。余ったスペースの分配になる訳です。意識して使うには、最終的な形を思い描いて設計する必要があると思いますが、慣れると複雑なグリッドデザイン風の表示が実現できます。このようにFlexboxはfloatの代替のみならず、アイデア次第では様々な表現方法やユーザーインターフェイスを作る事に活用できます。今では主要ブラウザでのサポートもほぼ完了(IEは10以上)しておりますし、これからは主流となるレイアウト方法だと思いますので、ぜひ皆さんも使ってみて下さい。新着情報ITコラムWEB制作その。